教你用 JavaScript 实现点击支付框

作者：小院里的霍大侠

2022-12-13
河北
本文字数：732 字
阅读完需：约 2 分钟

案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！

我们来用 JavaScript 编程实战案例，做一个点击支付框案例。本案例主要通过用户进行点击按钮，会弹出不同的对话框出来。通过实战我们将学会 onclick 方法、window.confirm 方法。

案例演示

用户进行点击案例，会弹出不同的对话框出来

源码学习

进入核心代码学习，我们先来看 HTML 中的核心代码。

<div class="content">  <p>商品：RTX4090Ti</p>  <p>原价：12000元</p>  <p>现价：2000元</p>  <p>购买人：大大怪将军</p>  <p>地址：M78星云</p>  <p>    <button class="btn1">取消支付</button>    <button class="btn2">立即支付</button>  </p></div>

复制代码

然后我们来编写核心的 JavaScript 代码。通过 getElementsByTagName 获得指定按钮对象，使用 onclick()方法进行点击，最后利用 window.confirm 方法进行弹出对话框。

//有个小院-兴趣编程document.getElementsByTagName('button')[1].onclick = function() {  let res = window.confirm('是否确认支付？');  if (res) {  alert('支付成功')} else {  alert('您已经取消支付')}}  document.getElementsByTagName('button')[0].onclick = function(){  let res = window.confirm('是否取消支付？');  if(res){  alert('您已经取消支付')}else{  alert('希望您能下单')}}

复制代码

记得关注我，每天学习一点点

你觉得还有哪里能改进？

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。

私微信：huodaxia_xfeater

二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg

公众号：有个小院（微信公众号：yougexiaoyuan）

github：yougexiaoyuan (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/4f579efca7726e05a46b51435】。文章转载请联系作者。

小院里的霍大侠

关注

还未添加个人签名 2020-09-02 加入

还未添加个人简介

发布

暂无评论

创作场景