js倒计时效果——定时器

最新推荐文章于 2023-06-29 14:43:36 发布

h_jQuery

最新推荐文章于 2023-06-29 14:43:36 发布

阅读量817

点赞数

分类专栏： HTML HTML5 javascript 文章标签： css javascript js html vue

本文链接：https://blog.csdn.net/h_jQuery/article/details/118597446

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

<!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>

效果图：
在这里插入图片描述

h_jQuery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js倒计时效果——定时器

<!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>co
复制链接

扫一扫

专栏目录