精华内容
下载资源
问答
  • 2021-06-10 13:31:16

    需求分析:

    希望制作一个固定时间倒计时效果,比如某某活动在4小时之后结束,点开网页,触发倒计时事件,开始4小时倒计时。考虑使用setInterval定时器,在时间为0后,clearInterval清除定时器。

    代码实例:

    写一个span用于显示,记得引用jQuery

    HTML:

    JS:

    $(function(){

    var timeInt = setInterval(function(){leftTimer();},1000); //开始倒计时

    /*倒计时,可设定leftTime毫秒数为剩余时间*/

    var leftTime = 14400000;//剩余的毫秒数

    function leftTimer(){

    if(leftTime == 0){

    clearInterval(timeInt);

    /*此处可写倒计时结束后的动作*/

    }else{

    var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数

    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时

    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟

    var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数

    days = checkTime(days);

    hours = checkTime(hours);

    minutes = checkTime(minutes);

    seconds = checkTime(seconds);

    $("#timer").html(days+"天" + hours+"时" + minutes+"分"+seconds+"秒");

    leftTime = leftTime - 1000;

    }

    }

    function checkTime(i){ //将0-9的数字前面加上0,例1变为01

    if(i<10)

    {

    i = "0" + i;

    }

    return i;

    }

    });

    效果:

    参考:http://www.jb51.net/article/97501.htm

    感谢!

    更多相关内容
  • html倒计时小工具

    2017-09-29 17:24:16
    canvas绘制的炫酷倒计时工具,可以自定义倒计时分钟数。
  • html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码
  • HTML5网页倒计时代码特效是一款提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作。
  • html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码
  • html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效
  • html5 倒计时特效

    2018-04-19 15:49:56
    这是一款html5倒计时特效,非常炫酷,黑白风格的样式。
  • 主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • (function($) {  $.fn.ClassyCountdown = function(options, callback) {  var element = $(this);  var DaysLeft, HoursLeft, MinutesLeft, SecondsLeft;  var secondsLeft;  var isFired = false;... },
  • html5倒计时模板.zip

    2020-01-14 15:18:59
    html5倒计时模板,倒计时采用的是动态数字,倒计时时间可以自己设置,倒计时完成后可以进行跳转页面操作。倒计时数字颜色样式可自行更改
  • JavaScript动态倒计时网页代码动态倒计时网页代码,网页由div+css布局制作,作品为1页,在各屏幕分辨率下都能全屏显示,网页中的背景图片和文字都可以自己修改替换,改成任何主题。
  • 动态时钟+倒计时.html

    2019-10-16 13:36:58
    使用JavaScript实现倒计时,在页面上显示距离今年结束还有几天几小时几分钟几秒。同时实现了时钟的动态改变。
  • 3个HTML5网页倒计时代码特效是一款提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作。
  • 跨年倒计时HTML源码

    2020-06-21 11:00:07
    雪花特效和倒计时,对 html 感兴趣的可以查看原代码看看~
  • 多款漂亮的HTML5圆形进度条倒计时动画代码,个性实用的网页倒计时进度条插件,多种风格总有一种适合你的。
  • 及时 用 React 编写的最小倒数计时器。 因为出于某种原因,我能找到的所有在线计时器都很愚蠢。 上的托管版本。 截屏: 测试 吉吉
  • 高考倒计时页面html

    2022-05-11 16:48:56
    高考倒计时页面html
  • HTML 5秒倒计时跳转指定网站源码,适合用来做网站的404网页,界面简约大气,自己也可以修改倒计时,真的很好
  • NULL 博文链接:https://heisetoufa.iteye.com/blog/355114
  • html倒计时

    2013-04-09 17:51:32
    用js 页面刷新数字自增 还有倒计时
  • html倒计时的代码!

    2021-05-07 09:45:02
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS实现倒计时(时、分,秒)</title>
    <script language="javascript" type="text/javascript">
    var interval = 1000;
    function ShowCountDown(year,month,day,divname)
    {
    var now = new Date();
    var endDate = new Date(year, month-1, day);
    var leftTime=endDate.getTime()-now.getTime();
    var leftsecond = parseInt(leftTime/1000);
    //var day1=parseInt(leftsecond/(24*60*60*6));
    var day1=Math.floor(leftsecond/(60*60*24));
    var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
    var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
    var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
    var cc = document.getElementById(divname);
    cc.innerHTML = "脚本之家提示距离"+year+"年"+month+"月"+day+"日还有:"+day1+"天"+hour+"小时"+minute+"分"+second+"秒";
    }
    window.setInterval(function(){ShowCountDown(2010,4,20,'divdown1');}, interval);
    </script>
    </head>
    <body>
    <div id="divdown1"></div>
    </body>
    </html>
    

    完整实例:http://github.crmeb.net/u/defu

    展开全文
  • 倒计时.html

    2019-09-20 18:43:53
    倒计时简单制作,思路是利用思路:获取结束的时间-当前的时间>0,本资源好理解,便于学习
  • 时分秒倒计时.html

    2020-04-21 18:32:26
    JavaScript的计时器,简单的写一个春节时间倒计时,主要就是时间的计算,对时分秒的计算,年月的计算。
  • 主要介绍了基于JS+HTML5实现获取手机验证码倒计时按钮,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • html5简单圆形进度条倒计时插件 html5简单圆形进度条倒计时插件 html5简单圆形进度条倒计时插件 html5简单圆形进度条倒计时插件
  • HTML倒计时简单实现

    2019-10-04 08:49:28
    1 <...doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7...
     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style type="text/css">
     7         h1{
     8             font-size: 50px;
     9             text-align: center;
    10         }
    11     </style>
    12 </head>
    13 <body>
    14 <h1>倒计时:<span>10</span></h1>
    15 <script type="text/javascript" src = "http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
    16 <script type="text/javascript">
    17     $(document).ready(function(){
    18         var e = $("h1 span").first();
    19         var i = 9;
    20         var interval = setInterval(function(){
    21             e.html(i);
    22             i--;
    23             if(i <= 0){
    24                 clearInterval(interval);
    25             }
    26         },1000);
    27     })
    28 </script>
    29 </body>
    30 </html>
    View Code

     

    转载于:https://www.cnblogs.com/sxmcACM/p/4096071.html

    展开全文
  • js结合css3倒计时三秒动画特效是一款带有动画效果的倒计时时间代码。
  • html代码:Countdown ClockDaysHoursMinutesSecondsCSS代码:#clockdiv{font-family: sans-serif;color: #fff;display: inline-block;font-weight: 100;text-align: center;font-size: 30px;}#clockdiv > div{...

    的html代码:

    Countdown Clock

    Days
    Hours
    Minutes
    Seconds

    CSS代码:

    #clockdiv{

    font-family: sans-serif;

    color: #fff;

    display: inline-block;

    font-weight: 100;

    text-align: center;

    font-size: 30px;

    }

    #clockdiv > div{

    padding: 10px;

    border-radius: 3px;

    background: #00BF96;

    display: inline-block;

    }

    #clockdiv div > span{

    padding: 15px;

    border-radius: 3px;

    background: #00816A;

    display: inline-block;

    }

    .text{

    padding-top: 5px;

    font-size: 16px;

    }

    javascript代码:

    function getTimeRemaining(endtime) {

    var t = Date.parse("June 31,2017") - Date.parse(new Date());

    var seconds = Math.floor((t/1000) % 60);

    var minutes = Math.floor((t/1000/60) % 60);

    var hours = Math.floor((t/(1000 * 60 * 60)) % 24);

    var days = Math.floor(t/(1000 * 60 * 60 * 24));

    return {

    'total': t,

    'days': days,

    'hours': hours,

    'minutes': minutes,

    'seconds': seconds

    };

    }

    function initializeClock(id, endtime) {

    var clock = document.getElementById(id);

    var daysSpan = clock.querySelector('.days');

    var hoursSpan = clock.querySelector('.hours');

    var minutesSpan = clock.querySelector('.minutes');

    var secondsSpan = clock.querySelector('.seconds');

    function updateClock() {

    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;

    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);

    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);

    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {

    clearInterval(timeinterval);

    }

    }

    updateClock();

    var timeinterval = setInterval(updateClock, 1000);

    }

    var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

    initializeClock('clockdiv', deadline); 在html documnet

    ,包括新文件:

    希望它有效...

    展开全文
  • html实现的新年倒计时

    2018-12-27 11:18:04
    html实现的新年倒计时,可以根据更改图片和功能,是2019的倒计时
  • 使用 HTML、CSS 和 JS 的简单倒数计时

    万次阅读 多人点赞 2021-09-09 16:07:44
    我们在不同类型的电子商务网站上看到,在任何产品或优惠到达之前的某个时间开始倒计时。 在本文中,我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,456
精华内容 14,182
关键字:

html 倒计时

友情链接: efodbc_pb9.zip