【JavaWeb】Javascript经典案例

Javascript经典案例
注意：该文章是参考b站<20个JS经典案例>进行学习的，没有CSS的组成。
在慢慢更新中…哈哈哈哈，太慢了

文章目录

- 1.支付定时器
- 2.验证码生成及校验

1.支付定时器

代码实现：

confirm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认</title>
</head>
<body>
<div>

        <p>商品：Web前端课程</p>
        <p>原价：1980元</p>
        <p>现价:1.98元</p>
        <p>内容：HTML,CSS,JS</p>
        <p>地址：北京朝阳区</p>
        <p>
            <button>取消</button>
            <button>支付</button>
        </p>

</div>
<script>
    //逻辑：点击支付，出现确认框
    document.getElementsByTagName("button")[1].onclick=function (){
        let res=window.confirm('您确定要支付嘛？');
        if(res){
            location.href='succ.html'
        }
    }
</script>

</body>
</html>

succ,.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功的页面</title>
</head>
<body>
<div>
    <h2>恭喜您，支付成功</h2>
    <span id="jumpTo">10</span>秒后自动返回首页
    <p><button>立即返回</button></p>
</div>
<script>
    //逻辑：加载页面时，应该触发定时器10s
    window.onload=function(){
        let timer=10;
        setInterval(()=>{
            timer--;
            document.getElementById("jumpTo").innerText= timer;
            if(timer==0){
                location.href='confirm.html'
            }
        },1000)
        document.getElementsByTagName('button')[0].onclick=function(){
            location.href='confirm.html'
        }
    }
</script>
</body>
</html>