精华内容
下载资源
问答
  • js实现倒计时,定时器–完成时间倒计时 //每秒刷新次 setInterval(function showtime() { //结束时间 var endTime = document.getElementById("endTime").value; endTime = new Date(endTime); //当前时间 ...

    js实现倒计时,定时器–完成时间倒计时

    //每秒刷新一次
    setInterval(function showtime() {
                 //结束时间
                 var endTime = document.getElementById("endTime").value;
                 endTime = new Date(endTime);
                 //当前时间
                 let beginTime = new Date();
                 //计算间隔的毫秒数
                 var jgTime = endTime - beginTime;
                 //一秒=1000毫秒(24,60,60就不解释了)
                 //获得天数
                 var dd = parseInt(jgTime /1000/ 24 / 60 /60);
                 dd = dd < 10 ? '0' +dd : dd;
                 //获得小时数,24小时之内
                 var HH= parseInt(jgTime /1000/ 60 / 60 % 24);
                 HH= HH< 10 ? '0' +HH: HH;
                 //获得分钟数,60分钟之内
                 var mm = parseInt(jgTime /1000/ 60  % 60);
                 mm = mm < 10 ? '0' +mm : mm;
                 //获得秒数,60秒之内
                 var ss = parseInt(jgTime/1000  % 60);
                 ss = ss < 10 ? '0' +ss : ss;
                 var jg = document.getElementById("jgTime");
                 jg.innerText =dd + '天' + HH+ '时' + mm + '分' + ss +'秒';
             },1000);
    

    思路:用获取的时间戳-现在的时间戳得到间隔的毫秒数,时间无法减去时间,有可能生成负数,所以采用时间戳的方法得到毫秒数形式的剩余时间,最后再把剩余时间转换为天、时、分、秒格式。

    dd = parseInt(总秒数/60/60/24);     // 计算天数
    HH = parseInt(总秒数/60/60 % 24);   // 计算小时
    mm = parseInt(总秒数/60 % 60);      // 计算分钟
    ss = parseInt(总秒数 % 60);         // 计算秒数
    
    new Date();   转换为时间戳格式
    

    1.倒计定时器:timename=setTimeout(“function();”,delaytime);
    2.循环定时器:timename=setInterval(“function();”,delaytime);
    第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。
    你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout(“function();”,delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
    则需要用到循环定时器“setInterval(“function();”,delaytime)” 。
    clearTimeout(对象) 清除已设置的setTimeout对象
    clearInterval(对象) 清除已设置的setInterval对象

    展开全文
  • 本文实例为大家分享了js实现时间倒计时的具体代码,供大家参考,具体内容如下这里使用的是Date日期类日期类倒计时window.onload=function(){var odiv=document.getElementById("time");var obtn=document....

    本文实例为大家分享了js实现时间倒计时的具体代码,供大家参考,具体内容如下

    这里使用的是Date日期类

    日期类倒计时

    window.οnlοad=function(){

    var odiv=document.getElementById("time");

    var obtn=document.getElementById("btn");

    var omusic=document.getElementById("music");

    obtn.οnclick=function(){//按钮点击 音乐停止播放

    omusic.pause();

    }

    function totwo(e){

    return e<10?"0"+e:""+e;//如果取得的数字为个数则在其前面增添一个0

    }

    function go(){//把获取时间的功能封装到函数内 注意 时间要向下取整避免小数

    var time1=new Date();//获取当前时间 获取的市1970年1年1月日到现在的毫秒数(必须写在函数或者定时器内 每一次变化都要重新获取当前时间)

    var time2=new Date(2017,9,27,17,20,10);//设置需要到达的时间 也是获取的毫秒数

    var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//获得差值除以1000转为秒

    var day=totwo(Math.floor(conS/86400));// 差值/60/60/24获取天数

    var hour=totwo(Math.floor(conS%86400/3600)); // 取余/60/60获取时(取余是获取conS对应位置的小数位)

    var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60获取分

    var s=totwo(Math.floor(conS%60)); //取总秒数的余数

    var html="倒计时"+day+"天"+hour+"时"+min+"分"+s+"秒";

    odiv.innerHTML=html;//把字符串添加进div中

    if(conS<0){//倒计时完成 执行功能,这里是播放MP3

    clearInterval(time);//执行功能时要清除时间函数

    omusic.play();

    odiv.innerHTML="春节快乐!";

    }

    }

    go();//调用函数

    var time=setInterval(go,1000);//设置定时器 每一秒执行一次

    }

    停止

    效果图:

    73433d76bcc8b8cdd15c8cca0e02a126.gif

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 本文实例为大家分享了js实现时间倒计时展示的具体代码,供大家参考,具体内容如下这里使用的是Date日期类日期类倒计时window.onload=function(){var odiv=document.getElementById("time");var obtn=document....

    本文实例为大家分享了js实现时间倒计时展示的具体代码,供大家参考,具体内容如下

    这里使用的是Date日期类

    日期类倒计时

    window.οnlοad=function(){

    var odiv=document.getElementById("time");

    var obtn=document.getElementById("btn");

    var omusic=document.getElementById("music");

    obtn.οnclick=function(){//按钮点击 音乐停止播放

    omusic.pause();

    }

    function totwo(e){

    return e<10?"0"+e:""+e;//如果取得的数字为个数则在其前面增添一个0

    }

    function go(){//把获取时间的功能封装到函数内 注意 时间要向下取整避免小数

    var time1=new Date();//获取当前时间 获取的市1970年1年1月日到现在的毫秒数(必须写在函数或者定时器内 每一次变化都要重新获取当前时间)

    var time2=new Date(2017,9,27,17,20,10);//设置需要到达的时间 也是获取的毫秒数

    var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//获得差值除以1000转为秒

    var day=totwo(Math.floor(conS/86400));// 差值/60/60/24获取天数

    var hour=totwo(Math.floor(conS%86400/3600)); // 取余/60/60获取时(取余是获取conS对应位置的小数位)

    var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60获取分

    var s=totwo(Math.floor(conS%60)); //取总秒数的余数

    var html="倒计时"+day+"天"+hour+"时"+min+"分"+s+"秒";

    odiv.innerHTML=html;//把字符串添加进div中

    if(conS<0){//倒计时完成 执行功能,这里是播放MP3

    clearInterval(time);//执行功能时要清除时间函数

    omusic.play();

    odiv.innerHTML="春节快乐!";

    }

    }

    go();//调用函数

    var time=setInterval(go,1000);//设置定时器 每一秒执行一次

    }

    停止

    效果图:

    0992e0d6bfba572037aef875a422538f.gif

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 2014-07-03 saber +0 Javascript运行客户端,所以如果你想要服务器时间,你将需要做一个AJAX调用服务器。 – +0 谢谢你怎么能打电话给whit ajax? – +0 您在'$ newcounter'上使用的当前值是多少? –

    (function (e) {

    e.fn.countdown = function (t, n) {

    function i() {

    eventDate = Date.parse(r.date)/1e3;

    currentDate = Math.floor(e.now()/1e3);

    if (eventDate <= currentDate) {

    n.call(this);

    clearInterval(interval)

    }

    seconds = eventDate - currentDate;

    days = Math.floor(seconds/86400);

    seconds -= days * 60 * 60 * 24;

    hours = Math.floor(seconds/3600);

    seconds -= hours * 60 * 60;

    minutes = Math.floor(seconds/60);

    seconds -= minutes * 60;

    days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("day");

    hours == 1 ? thisEl.find(".timeRefHours").text("hours") : thisEl.find(".timeRefHours").text("hours");

    minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");

    seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : thisEl.find(".timeRefSeconds").text("Seconds");

    if (r["format"] == "on") {

    days = String(days).length >= 2 ? days : "0" + days;

    hours = String(hours).length >= 2 ? hours : "0" + hours;

    minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;

    seconds = String(seconds).length >= 2 ? seconds : "0" + seconds

    }

    if (!isNaN(eventDate)) {

    thisEl.find(".days").text(days);

    thisEl.find(".hours").text(hours);

    thisEl.find(".minutes").text(minutes);

    thisEl.find(".seconds").text(seconds)

    } else {

    alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");

    clearInterval(interval)

    }

    }

    thisEl = e(this);

    var r = {

    date: null,

    format: null

    };

    t && e.extend(r, t);

    i();

    interval = setInterval(i, 1e3)

    }

    })(jQuery);

    $(document).ready(function() {

    function e() {

    var e = new Date;

    e.setDate(e.getDate() + 60);

    dd = e.getDate();

    mm = e.getMonth() + 1;

    y = e.getFullYear();

    futureFormattedDate = mm + "/" + dd + "/" + y;

    return futureFormattedDate

    }

    $("#countdown").countdown({

    date: "<?php echo $newcounter ?> ", // Change this to your desired date to countdown to

    format: "on"

    });

    });

    此脚本使用我的客户端日期,但我想使用我的服务器日期。如何读取从我的服务器读取的日期?我在脚本中试过这段代码:

    currentDate = <?php echo time() ?>;

    但是我的倒计时停止了,不起作用。

    2014-07-03

    saber

    +0

    Javascript运行客户端,所以如果你想要服务器时间,你将需要做一个AJAX调用服务器。 –

    +0

    谢谢你怎么能打电话给whit ajax? –

    +0

    您在'$ newcounter'上使用的当前值是多少? –

    展开全文
  • 为了方便提醒用户及时支付,需要在订单列表页展示倒计时。实现代码$(document).ready(function () {var addTimer = function () {var list = [], interval;return function (id, closetime) {var deadline =...
  • 废话不多说,直接上代码 Document 使用setInterval来计时,而不用setTimeout计时(只能用次),这是长时间没有写js代码而留下的问题,居然连这么简单的js代码都忘掉了,真是。。。
  • js 时间倒计时

    2016-07-06 11:41:53
    倒计时 #div { color: #A22900; font-size: 20px; } var countdown = function () { var reg = /^\d{2}$/; var ending = new Date ("2016-7-6 11:40:00"); var now = new
  • Javascript实现时间倒计时

    千次阅读 2017-07-14 20:10:48
    这里使用的是Date日期类<!DOCTYPE html> 日期类倒计时 <script type="text/javascript"> window.onload=function(){
  • JS服务器获取时间倒计时

    千次阅读 2012-12-12 17:24:26
    最近,公司搞营销活动,搞1元抢某某之类的形式,不管他是什么形式,页面设计... 这么做也有一个弊端,假如说用户的网络比较长,请求的时间比较长,倒计时所看到的时间与服务器的时间相差还是蛮大的,如果JS取的是用户
  • 1  ... 到官网上下载插件 ...<script src="js/jquery.js" > <script type="text/javascript" src="js/jquery.countdown.js"> <script type="text/javascript"> ...就可以获得一个简单的倒计时
  • 常有的什么秒杀啊,活动截止时间之类的能用上。 不爱打字了,开始上代码 先写结构,在data中定义timehtml用于...然后在进入页面实列创建完成就执行倒计时函数 created () { this.overtime = '2019-9-1 14:00:5...
  • 秒杀倒计时JS

    2019-05-07 16:24:54
    1.先计算倒计时结束时间跟服务器当前时间相差多少; 2.根据客户端时间 + 第步计算出的时间差 = 结束时间; 3.然后根据计算出的结束时间开始倒计时。 var nowdate=new Date();//全局变量,不每秒刷新的时间(用于...
  • js倒计时

    2019-03-20 15:34:16
    以前做购票项目配过一个倒计时,今天试着写一写。 首先是页面:定义15分钟完成订单,否则自动取消。 js中需要用到的数据,span的class名,倒计时的初始值(span值)。 请在<span class="orderM" style=...
  • 简易倒计时功能的完成)灵感来源:知识点涉及:Data对象格式化日期 年月日星期格式化时间 时分秒Data总的毫秒数(时间戳)重点: 倒计时案例有待改进 灵感来源: 京东的秒杀页面 学习了js的Data对象之后 我们也可以...
  • 使用JavaScript实现一个简单的倒计时的效果 我们来用JavaScript的方法实现一下倒计时的效果。 首先我们用一个div来装,并且给这个div一个类为box,我们给这个div设置一些样式, width: 1000px;height: 406px;...
  • 现在再一次碰到了倒计时的需求,是一个答题倒计时的场景。具体效果如图。思路要实现倒计时,就需要来回顾一下JavaScript中的定时器相关知识。setInterval: 每间隔N秒执行一次回调函数。setTimeout: N秒后执行回调...
  • 最近在做一个功能,类似与用户选择商品,点击按钮,出现一个类似购物车的信息展示面板(无刷新),用户在指定时间内不离开就会自动返回,信息面板有一个倒计时,由于是无刷新的,在写倒计时的时候,如果用户多次触发...
  • vue2 时间倒计时

    千次阅读 2018-09-13 18:45:56
    由于项目需要开发一个倒计时的功能,后台传送了一个结束时间的字段。 因此,这里封装了一个组件: &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;p class=&amp;quot;p2&amp;quot; :...
  • js转换时间倒计时

    2019-01-10 08:47:13
    // 转换时间 tranformTime(){ // console.log(this.a,'444444444') if(this.state=="審核中"){ ...
  • 该插件主要实现倒计时的功能。可以在所要网页标签内显示倒计时,并可以指定倒计时结束后的操作。
  • 话不多说,上代码,首先是布局和css...可以在input里面设置倒计时的事件,然后在下方的div中进行显示 然后是javascript部分的代码 运行效果: 转载于:https://www.cnblogs.com/wwmm1996/p/10769619.html...
  • js制作一个简单的新年倒计时 一个简单的js倒计时的实现 这是页面内容: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 先看效果图!...先看单个倒计时: 代码: <div class="titRight"> <div class="top"> <p>{{detailsListDetails.cate1_name1}}</p> <p>还有{{detailsListDetail...
  • 主要介绍了JS实现商城秒杀倒计时功能(动态设置秒杀时间),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~). 代码名称 <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,387
精华内容 2,154
关键字:

完成一个时间倒计时js