网页-实时倒计时

最新推荐文章于 2024-04-10 11:34:31 发布
最新推荐文章于 2024-04-10 11:34:31 发布
阅读量591 收藏
点赞数
文章标签： html javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fugyuan000887/article/details/25283931
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
    <title>实时倒计时</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312" />
</head>
<body>
    <input type="text" id='iniTime' value='10' />（单位：秒）
    <input type="button" οnclick="CalDecTime();" value="开始" />
    <p>
        剩余时间：<span id="endtime">10</span></p>
    <script type="text/javascript">
        var CID = "endtime";
        var iTime = 0;
        if (window.CID != null) {
            iTime = parseInt(document.getElementById("iniTime").value);
            RemainTime();
        }

        function CalDecTime() {
            iTime = parseInt(document.getElementById("iniTime").value);
            RemainTime();
        }

//倒计时计算
        function RemainTime() {
            var iDay, iHour, iMinute, iSecond;
            var sDay = "", sHour = "", sMinute = "", sSecond = "", sTime = "";
            if (iTime >= 0) {
                iDay = parseInt(iTime / 24 / 3600);
                if (iDay > 0) {
                    sDay = iDay + "天";
                }
                else {
                    sDay = "0天";
                }
                iHour = parseInt((iTime / 3600) % 24);
                if (iHour > 0) {
                    sHour = iHour + "小时";
                }
                else {
                    sHour = "0小时";
                }
                iMinute = parseInt((iTime / 60) % 60);
                if (iMinute > 0) {
                    sMinute = iMinute + "分钟";
                }
                else {
                    sMinute = "0分钟";
                }
                iSecond = parseInt(iTime % 60);
                if (iSecond >= 0) {
                    sSecond = iSecond + "秒";
                }
                else {
                    sSecond = "0秒";
                }
                //显示时间
                sTime = "<span style='color:darkorange'>" + sDay + sHour + sMinute + sSecond + "</font>";

                //时间减一秒
                iTime = iTime - 1;

                //计算下一秒时间
                setTimeout("RemainTime()", 1000);
            }
            else {
                sTime = "<span style='color:red'>倒计时结束！</span>";
            }
            document.getElementById(CID).innerHTML = sTime;
        }
    </script>
</body>
</html>

休闲中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
烟花版- 新年倒计时代码
12-21
- 倒计时需要实时更新，所以需要设置一个定时器，每隔一定时间（例如1秒）重新计算并显示新的倒计时。 - JavaScript中的`setInterval`函数可以实现这个功能，Python中可以使用`time.sleep`配合循环来达到类似效果...
js网页实时倒计时精确到秒级
10-26
本文将详细讲解如何使用JavaScript实现一个精确到秒级的网页倒计时功能，以及涉及到的相关知识点。 首先，我们需要理解倒计时的基本原理。倒计时的核心是计算目标时间与当前时间之间的差值，并将这个差值转化为天、...
❤️创意网页：迎接高考的倒计时网页(❤️好看好用❤️)HTML+CSS+JS
VLOKL的博客
07-08 1911
❤️创意网页：🌌迎接高考的倒计时网页(❤️好看好用❤️)HTML+CSS+JS
网页或大屏展示的倒计时器
ahhmdwg的专栏
05-12 3183
1、可展示在网页和大屏。 2、可设置倒计时时间、暂停、继续、重置、带音效
实现网页倒计时和显示当前时间
2301_76675652的博客
11-29 2437
本文将介绍如何使用 JavaScript 在网页中实现倒计时和显示当前时间的功能。在网页开发中，我们经常需要展示当前时间，同时也可能需要在某些特定场景中进行倒计时。借助 JavaScript，我们可以轻松地实现这些功能。
【web项目】任务倒计时网页
m0_65431212的博客
10-06 1472
早就想搞了
HTML网页版倒数日·Days Matter
最新发布
weixin_51831991的博客
04-10 2438
HTML+CSS+JS原生代码实现的网页版倒数日·Days Matter
烟花倒计时自适应网页模板
01-23
JavaScript可以用于实时更新倒计时，创建动态效果，而CSS3则提供了丰富的动画效果，如渐变、过渡和关键帧动画，能够使倒计时过程更加生动和吸引人。同时，为了优化性能和降低延迟，开发者可能会使用...
基于django的网页倒计时
02-10
【标题】"基于django的网页倒计时"指的是在Web开发中使用Python的Django框架实现的一种动态显示倒计时的网页功能。这种功能常见于各类活动页面、竞赛报名截止或者线上活动开始前的预告，为用户提供清晰的时间提醒。 ...
网页小技巧之倒计时
初阶农民工的博客
07-23 504
思路：利用日期函数Date(),分别得到终点时间和当前时间距离1970.1.1的毫秒数，然后相减，得到相差毫秒数 然后利用相差毫秒数去计算月天时分秒。然后使用定时器设定每秒钟执行1次上述行为。(注意使用parseInt()取整) 关键知识：日期函数Date(),定时器setInterval() 具体代码：   &lt;!DOCTYPE html&gt; &lt;html lang="en"&g...
网页计时器（倒计时）
06-23
自己参考网上并随便做的一个网页计时器，曾在学校说客比赛中用到，大家可以随意修改网页时间倒计时、里面设定有时、分、秒，如需修改直接用文本编辑即可；本计时器为倒计时，可随意设定报警提示音，可设置倒数五秒提示音。。。。。。。
网页版倒计时和正计时的例子
07-25
在前端里网站发现的倒计时脚本，挺有意思的。发现天数不能显示三位，修改了一下。另又加了正计时的脚本，供大家采用
考研倒计时html版
07-22
下载完成后请根据您的需要更改时间，背景图片，是否需要桌面天气插件等，完成后，使用桌面“右键——属性——桌面”，点击“浏览”找到文件位置确定即可
如何在网页上实现动态倒计时功能
在这个充满危险的乱世之中，只有学会烤鸡才能顽强的活下去。
07-16 1462
一、制作意图 在制作的时候，我们就需要运用到JS了，现在我们需要将下面的5秒依次往下减，如何实现呢？ 二、过程 需要先添加JS language,type需要都加上 （1）在winform中可能有timer控件，在JS中没有timer控件，但是setInterval的功能和timer控件的功能是大致是一致的。 SetInterval("fun()",1000)...
网页倒计时
angry_rooster的博客
06-25 7125
网页倒计时 制作一个简单的网页倒计时器。这个倒计时可以根据输入的截止时间进行倒计时，输入的截止日期数据会被缓存在本地存储（“deadlineDate”）（源码见文末） 这里使用原生JS进行相关网页逻辑的编写，主要应用到的API有 document.getElementById: 用于获取DOM元素节点，方便向节点填入数据并显示 Window.setInterval(): 用于每隔一秒刷新一次显示的倒计时数据 elem.addEventListener(): 用于绑定事件，这里只是用于绑定重置按钮的点击事
js网页倒计时功能（天，时，分，秒）
weixin_30785593的博客
07-29 519
给定任何一个时间，然后实现现在到那个时间的倒计时。 下面的例子是显示现在到2019年8月1号0时0分的倒计时： <div class="list"> <span id='day'></span>天 <span id='hours'></span>时 <span...
前端网页版倒计时
qq_43122496的博客
03-17 334
前端网页倒计时使用原生简单实现倒计时（比如秒杀活动，或者倒计时领取活动）代码 使用原生简单实现倒计时（比如秒杀活动，或者倒计时领取活动） 代码 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css样式 --> <style type="
JS制作一个简单的网页倒计时器
Quentin0823的博客
03-01 8514
制作一个简单的网页倒计时器（js原生代码） 实现一个简单的网页倒计时（距离xx年x月x日还剩多少时间），效果是这样的 首先HTML代码部分，我们需要简单编写一个html代码，用来接收倒计时时间显示。 <div id="box"></div> 接下来就是JS代码部分。 首先要知道当前的时间，然后还需要指定一个到期时间，拿到当前时间和指定时间的时间差 function antitime() { var now = new Date(); //获取当前时间
一个简单的网页计时器
qq_41039430的博客
06-10 2298
一个简单的网页计时器 作用 记录浏览该网页用的时间 实现 js源码 var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace
js实时更新网页上的倒计时
05-21
可以使用JavaScript中的定时器函数setInterval()，以一定的时间间隔不断更新倒计时显示。 以下是一个简单的示例代码： HTML部分： ``` <div id="countdown"></div> ``` JavaScript部分： ```javascript // 目标...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值