js倒计时效果——定时器

最新推荐文章于 2025-09-25 12:32:42 发布

原创最新推荐文章于 2025-09-25 12:32:42 发布 · 890 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #js #html #vue

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文展示了一个简单的前端页面，用于模拟商品购买后的确认支付过程。包括商品信息展示、支付按钮及支付确认弹窗，并在支付成功后跳转到成功页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>confirm.html</title>
    <style>
        div {
            width: 200px;
            height: 280px;
            background-color: #eee;
            padding: 20px;
            margin: 0 auto;
        }
        
        button {
            margin: 30px 25px;
        }
    </style>
</head>

<body>
    <div>
        <p>商品：Web前端课程</p>
        <p>原价：1980元</p>
        <p>现价：1.98元</p>
        <p>内容：HTML、CSS、JS</p>
        <p>地址：北京市朝阳区</p>
        <p>
            <button>取消</button>
            <button id="btn">支付</button>
        </p>
    </div>
    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function() {
            // console.log(99999);
            //在真实项目中，是不用confirm来设置弹出框的
            //要么用框架里面的弹出框，要么就自己设置方法弹出一个自定义的div弹出框
            const res = confirm('您确定支付吗？')
            if (res) {
            	location.href = './succ.html'
            	//window可以省略不写
                //window.location.href = './succ.html'
            }
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" />
    <title>succ.html</title>
    <style>
        div {
            margin: 0 auto;
            width: 500px;
        }
        
        #jumpTo {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div>
        <h2>恭喜您，支付成功</h2>
        <span id="num">10</span>秒后自动返回首页
        <p><button id="btn">立即返回</button></p>
    </div>
    <script>
        var num = 10;
        var btn = document.getElementById('btn')

        function time() {
            num--;
            document.getElementById('num').innerHTML = num;
            if (num == 0) {
                clearInterval(t)
                window.location.href = './confirm.html'
            }
        }
        // 引用函数要加引号
        var t = setInterval("time()", 1000);
        btn.onclick = function() {
            window.location.href = './confirm.html'
        }
    </script>
</body>

</html>