JS倒计时

已于 2023-02-15 09:07:22 修改
阅读量84 收藏
点赞数
文章标签： javascript css html
于 2023-02-12 19:39:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tong200617/article/details/128998672
版权

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>专业的在线倒计时</title>
        <style>
            /*以下为CSS样式设置*/
            /*为了代码简洁使用通配符，实际开发不建议使用*/
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
            }

            .ofixed {
                position: fixed;
                width: 30px;
                height: 30px;
                background-color: #00ff0f;
                top: 30%;
                opacity: 0.1;
                border-radius: 14px;
                text-align: center;
                line-height: 30px;
                transition: 1s;
                font-size: 12px;

            }

            .ofixed div {
                display: none;
            }

            .ofixed:hover {
                opacity: 0.8;
                width: 180px;
            }

            .ofixed:hover div {
                display: block;
            }

            .content {
                width: 450px;
                height: 100px;
                margin: 40px auto 0;
                display: flex;
                justify-content: space-between;
            }

            .button_content {
                width: 450px;
                height: 100px;
                margin: 10px auto;
                display: flex;
                justify-content: space-between;
            }

            input {
                width: 80px;
                height: 60px;
                /*border:1px solid blue;*/
                border-radius: 5px;
                border: none;
                opacity: 0.7;
                font-size: 30px;
                color: deepskyblue;
                text-align: center;

            }

            button {
                width: 100px;
                height: 40px;
                font-size: 20px;
                font-weight: bold;
                color: #4caf50;
                border: none;
                border-radius: 6px;
                position: relative;
            }

            button div {
                position: absolute;
                top: 0;
                font: 0;
                width: 0px;
                height: 40px;
                background-color: #2b74e2;
                transition: 0.4s;
                opacity: 0.5;
            }

            button:hover div {
                width: 100px;
            }

            span {
                font-size: 40px;
                position: relative;
                top: 3px;
            }

            #d1 {
                width: 900px;
                height: 300px;
                background-color: blueviolet;
                border-radius: 20px;
                /*text-align: center;*/
                font-weight: bold;
                font-size: 80px;
                line-height: 300px;
                color: black;
                margin: 0 auto;
                text-align: center;
            }

            #btn3 {
                color: black;
            }
        </style>
    </head>

    <body>
        <div class="ofixed">
            <div>这是一个隐藏的彩蛋</div>
        </div>
        <div class="content">

            <input type="text" id="newhours" maxlength="2">
            <span>时</span>
            <input type="text" id="newminutes" maxlength="2">
            <span>分</span>
            <input type="text" id="newseconds" maxlength="2">
            <span>秒</span>
        </div>
        <div class="button_content">
            <button id="btn1">开&emsp;始<div></div></button>
            <button id="btn2">暂&emsp;停<div></div></button>
            <button id="btn3">重&emsp;置<div></div></button>
        </div>

        <div id="d1">
        </div>
    </body>
    <script>
        // 获取一次当前系统时间
        var current_time = new Date();

        function fn1() {
            // 首先获取input输入框的的内容
            var ohours = document.getElementById("newhours").value;
            var ominutes = document.getElementById("newminutes").value;
            var oseconds = document.getElementById("newseconds").value;
            // input输入的内容是字符串，把它们相加成时间总的秒数
            // 把小时转换成相应的毫秒数
            var ohours_milli = ohours * 60 * 60 * 1000;
            // 把输入的分钟转换成相应的毫秒数
            var ominutes_millo = ominutes * 60 * 1000;
            // 把输入的转换成相应的毫秒数
            var oseconds_milli = oseconds * 1000
            // 累计相加得出用户输入的所有毫秒数
            var add_time = ohours_milli + ominutes_millo + oseconds_milli;
            // 通过计时器循环获得新的系统时间
            var reset_time = new Date();
            // current_time获取的系统时间加上用户输入的时间 减去当前系统时间，得到倒计时的效果
            var time = current_time.getTime() + add_time - reset_time.getTime();
            console.log(time)
            // 通过上面time获取的倒计时毫秒数，分别除以相对数字得到，分、秒以及毫秒
            var hours = Math.floor(time / 1000 / 60 / 60 % 24);
            var minute = Math.floor(time / 1000 / 60 % 60);
            var seconds = Math.floor(time / 1000 % 60);
            var milliseconds = Math.floor(time % 60);
            // 获取页面DIv
            var odiv = document.getElementById("d1");
            // 小于10在前面加0
            if (milliseconds < 10) {
                milliseconds = "0" + milliseconds;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (hours < 10) {
                hours = "0" + hours;
            }
            // 将得到结果输入至页面
            odiv.innerHTML = (hours + "&nbsp;:&nbsp;" + minute + "&nbsp;:&nbsp;" + seconds + "&nbsp;:&nbsp;" + milliseconds);

            // 一些判断条件
            //  输入的小时不能大于24小时，24小时等于86400000毫秒
            if (time > 86400000) {
                odiv.innerHTML = ("&hearts;最大小时数为24");
                odiv.style.color = "#ffeb3b";
                clearInterval(set_reset);
            }
            //  当倒计时为0的时候停止计时器
            if (time < 0) {
                odiv.innerHTML = ("&hearts;倒计时结束&hearts;");
                odiv.style.color = "red";
                clearInterval(set_reset);
            }
            // 输入非数字提示
            if (isNaN(time)) {
                odiv.innerHTML = ("&hearts;请输入正确的数字");
                odiv.style.color = "#ffeb3b";
                clearInterval(set_reset);
            }
            // 未输入时间提示
            if (ohours == "" && ominutes == "" && oseconds == "") {
                odiv.innerHTML = ("&hearts;请输入时间,重置再试");
                obtn1.innerHTML = "未输时间";
                obtn2.innerHTML = "未输时间";
                obtn1.disabled = true;
                obtn2.disabled = true;
                odiv.style.color = "#ffeb3b";
                clearInterval(set_reset);
            }
        }
        // 获取按钮
        var obtn1 = document.getElementById("btn1");
        var obtn2 = document.getElementById("btn2");
        var obtn3 = document.getElementById("btn3");
        // 鼠标点击执行

        obtn1.onclick = function() {
            obtn1.innerHTML = "正在执行";
            obtn2.innerHTML = "点击暂停";
            set_reset = setInterval("fn1()", 100);
            console.log(setInterval);
            // 让input的变为只读
            document.getElementById("newhours").disabled = "turn";
            document.getElementById("newminutes").disabled = "turn";
            document.getElementById("newseconds").disabled = "turn";
        }
        obtn2.onclick = function() {
            clearInterval(set_reset);
            obtn1.innerHTML = "点击继续";
            obtn2.innerHTML = "已&ensp;暂&ensp;停"

        }
        obtn3.onclick = function() {
            // 重新加载当前页面
            location.reload()
        }
    </script>
</html>

温柔归故里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 倒计时代码
10-29
JavaScript 倒计时代码详解 在本篇文章中，我们将深入探讨 JavaScript 倒计时代码的实现 principio 和应用场景。通过分析给定的代码，我们将了解到倒计时代码的基本结构、计时机制、显示...* JavaScript倒计时应用场景
js实现倒计时
oldolder的博客
07-29 1198
使用js实现倒计时
js倒计时
weixin_35750747的博客
01-05 57
好的。 如果你想在 JavaScript 中创建一个倒计时，你可以这样做： 定义一个变量来存储剩余的时间(以秒为单位)。 使用 setInterval 函数来周期性地执行代码，每隔一段时间就减少剩余时间的变量的值。 在 HTML 中放置一个元素来显示倒计时。 每次执行代码时，更新这个元素的内容来显示剩余时间。 当剩余时间变为 0 时，使用 clearInterval 函数停止 setInterv...
JavaScript实现倒计时功能
modao的博客
05-31 4459
本文主要介绍JavaScript中封装时间函数和如何倒计时功能，没有拐弯抹角，拿走即用。
JS实现倒计时和短信验证码倒计时功能
weixin_50367873的博客
06-19 3680
html30分钟倒计时。短信验证码倒计时功能。
JS 案例1 -- 倒计时
m0_69021165的博客
03-23 147
js中拿到两个节点的时间差，及定时器的设定来实现的一个简单的倒计时
简单实现JS倒计时效果
11-27
在JavaScript中，倒计时是一种常见的功能，常用于事件预告或者特定时间的提醒。本篇文章将探讨如何使用JS实现一个简单的倒计时效果。 首先，我们看标题和描述中的示例代码，这是一个基本的HTML文件，包含了一个...
JS倒计时_javascript倒计时
02-17
JS倒计时
Javascript倒计时代码
10-28
JS脚本是在网上找到的，然后进行了改进，弥补了不足之处。
js倒计时显示实例
10-20
本文分享了js倒计时显示的实例，需要的朋友可以参考借鉴，下面就跟小编一起来看看吧
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 282
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 898
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 672
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
JavaScript 常见数学用法
2302_77250325的博客
07-17 401
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
jquery-选择器常见用法
随笔
07-18 213
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 944
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
style-components使用手册
m0_62323931的博客
07-17 1128
div><MyButton $primary $color="black">按钮</MyButton></div>
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 243
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 514
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
javascript倒计时
12-12
以下是一个JavaScript倒计时的例子： ```javascript // 获取所有的span元素 var spans = document.querySelectorAll('span'); // 设置倒计时结束时间 var endTime = new Date('2022-10-1 12:00:00').getTime(); //...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值