精华内容
下载资源
问答
  • JavaScript倒计时器

    2016-01-13 22:56:00
    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 // 倒计时 8 ...
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script>
     7 //        倒计时
     8         function timerCount() {
     9             var today = new Date();
    10             var year = today.getFullYear();
    11             var someday = new Date(2016, 12, 1, 1, 23, 59);
    12             var time = (someday - today) / 1000;
    13             var day = Math.floor(time / (60 * 60 * 24));
    14             var hour = Math.floor(time % (60 * 60 * 24) / (60 * 60));
    15             var min = Math.floor(time % (60 * 60 * 24) % (60 * 60) / 60);
    16             var sec = Math.floor(time % (60 * 60 * 24) % (60 * 60) % 60);
    17 
    18             function double(value) {
    19                 return value < 10 ? "0" + value : value;
    20             }
    21 
    22             var timeStr = "还剩下" + double(day) + "" + double(hour) + "" + double(min) + "" + double(sec) + "";
    23             console.log(timeStr);
    24         }
    25         setInterval(function () {
    26             timerCount();
    27         }, 1000);
    28     </script>
    29 </head>
    30 <body>
    31 </body>
    32 </html>

     

    转载于:https://www.cnblogs.com/Farris/p/5128810.html

    展开全文
  • js倒计时器可自定义时间和暂停

    千次阅读 2018-02-06 11:05:14
    js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{...

    js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时
    这里写图片描述

    分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释)

    css

     html,body{
    width:100%;height:100%;
    }
    .content{
    height:100%;width:100%; 
    }
    .row-center{
    display:flex;flex-direction:row;justify-content:center;
    align-items:center;
    }
    .tc-input-style{
    outline:none;border:none;width:20%;height:80%;border-radius:10px;
    }
    .tc-span-style{
    width:30%;height:100%;font-weight:bold;
    }
    .tc-font-style{
    font-size:15px;font-weight:bold;
    }
    .tc-div-style1{
    height:33%;width:100%
    }
    .tc-div-style0{
    height:30%;width:100%
    }
    .tc-div-style2{
    height:10%;width:100%;  
    }
    .tc-div-style3{
    height:100%;width:30%
    }
    .column-center{
    display:flex;flex-direction:column;justify-content:center;
    align-items:center;
    }
    .column-start-center{
    display:flex;flex-direction:column;justify-content:flex-start;
    align-items:center;
    }
    #timecount{
    height:50%;width:20%;
    }
    .button-style-0{
    border-radius:10px;
    }
    .row-space-around{
    display:flex;flex-direction:row;justify-content:space-around;
    align-items:center;
    }

    h5

    <body>
    <div class="content row-center"> 
    
                 <div id="timecount" class="column-center tc-font-style" >
                 <div class="column-start-center tc-div-style0" >
                 <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">小时:</span><input class=tc-input-style id="hour_count" value="0"> </div>
                 <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">分钟:</span><input class=tc-input-style id="minute_count" value="0"> </div>
                 <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">秒:</span><input   class=tc-input-style id="second_count" value="0"> </div>
                 </div>
    
                 <div class="row-center  tc-div-style2">
                 <div  class="row-center tc-div-style3" id="hour_show" ></div>
                 <div  class="row-center tc-div-style3"  id="minute_show"></div>
                 <div  class="row-center tc-div-style3"  id="second_show"></div>
                 </div>
    
                  <div class="row-space-around tc-div-style2">
                  <button class="button-style-0"  onclick="timecounts()">start</button>
                  <button class="button-style-0" onclick="timestop()">stop</button>
                 </div>
    
                </div>
    
    
    </div>
    </body>

    记得引入jq

     <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    JS

    <script type="text/javascript">
    var timecount;//定义一个全局变量
    function timer(intDiff){
        //定义一个循环函数每一秒定时执行
        timecount=setInterval(function(){
        var hour=0,
            minute=0,
            second=0;//初始化时间默认值    
            //算法控制
        if(intDiff > 0){
            hour = Math.floor(intDiff / (60 * 60)) ;
            minute = Math.floor(intDiff / 60)  - (hour * 60);
            second = Math.floor(intDiff)  - (hour * 60 * 60) - (minute * 60);
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
       //打印到dom
        $('#hour_show').html('<s id="h"></s>'+hour+'时');
        $('#minute_show').html('<s></s>'+minute+'分');
        $('#second_show').html('<s></s>'+second+'秒');
        intDiff--;
        }, 1000);
        console.log(intDiff);   
    }
    
    function timecounts(){
         console.log($("#hour_count").val())
         count=parseInt($("#hour_count").val()*3600)+parseInt($("#minute_count").val()*60)+parseInt($("#second_count").val())
         timer(count);//调用计时器函数
         console.log(count);
    }
    function timestop(){
        var hour= $("#hour_show").text();
        var minute= $("#minute_show").text();
        var second= $("#second_show").text();
        var time=parseInt($("#hour_show").text())*3600+parseInt($("#minute_show").text())*60+parseInt($("#second_show").text())
        console.log(time);
        timecount=window.clearInterval(timecount);//停止计时器
    }
    </script>
    展开全文
  • 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js实现倒计时</title> 6 <style> 7 div{ 8 position...
     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8">
     5     <title>js实现倒计时</title>
     6    <style>
     7        div{
     8         position:absolute;
     9         width:400px;
    10         height:50px;
    11         left:50%;
    12         top:50%;
    13  
    14   
    15     }
    16 
    17 
    18 
    19 span {
    20       text-align: center;
    21       font-size:40px;
    22 }
    23 
    24    </style>
    25   </head>
    26   <body>
    27  
    28   
    29     <div id="container">
    30       
    31       <span id="demo"></span>
    32     
    33   
    34     </div>
    35   </body>
    36 <script>
    37       
    38 function clock(mytime){
    39     
    40     //设置要倒计时的时间
    41     var stime=new Date(mytime).getTime();
    42   // 获取目前的时间
    43     var ntime=new Date().getTime();
    44     var dtime=stime-ntime;
    45     
    46     
    47     if(dtime>0){//可以在此处设置闹钟
    48      
    49     var days = Math.floor(dtime / (1000 * 60 * 60 * 24));
    50     var hours = Math.floor((dtime% (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    51     var minutes = Math.floor((dtime % (1000 * 60 * 60)) / (1000 * 60));
    52     var seconds = Math.floor((dtime % (1000 * 60)) / 1000);
    53     document.getElementById("demo").innerHTML = days +"天" +hours +"时" + minutes +"分" +seconds +"秒";
    54     }
    55   else{//闹钟好了
    56     var div=document.getElementById("container");
    57     var audio=document.createElement("audio");
    58     div.appendChild(audio);
    59     audio.src="喜相逢.mp3";
    60     audio.loop="loop";
    61     audio.autoplay="autoplay";
    62     
    63   }
    64   
    65 }
    66 //重复调用
    67 setInterval(clock,1000)
    68 </script>
    69 </html>

     

    转载于:https://www.cnblogs.com/weblife/p/10271297.html

    展开全文
  • 好吧,我很难解决这个问题,我是一名php / C#开发人员,并且没有Javascript的经验或知识,我只需做一件需要Javascript的事情:当某个页面加载时,计数器启动.客户必须在此页面上停留20秒.之后,我想执行php代码.所以有两个...

    好吧,我很难解决这个问题,我是一名php / C#开发人员,并且没有Javascript的经验或知识,我只需做一件需要Javascript的事情:

    当某个页面加载时,计数器启动.客户必须在此页面上停留20秒.之后,我想执行php代码.

    所以有两个问题与我有关,第一:如果客户离开页面,我该如何停止计数器(意味着页面没有聚焦).

    2)如何在javascript中执行php? ,或从Javascript调用PHP函数.

    我到目前为止的代码是这样的:

    COUNTER_START = 20

    function tick () {

    if (document.getElementById ('counter').firstChild.data > 0) {

    document.getElementById ('counter').firstChild.data = document.getElementById ('counter').firstChild.data - 1

    setTimeout ('tick()', 1000)

    } else {

    document.getElementById ('counter').firstChild.data = 'done'

    }

    }

    if (document.getElementById) onload = function () {

    var t = document.createTextNode (COUNTER_START)

    var p = document.createElement ('P')

    p.appendChild (t)

    p.setAttribute ('id', 'counter')

    var body = document.getElementsByTagName ('BODY')[0]

    var firstChild = body.getElementsByTagName ('*')[0]

    body.insertBefore (p, firstChild)

    tick()

    }

    我还希望计时器在客户端返回页面时开始计时

    非常感谢您的帮助

    展开全文
  • 功能:同页面多个倒计时器 作者:zjwtnt 时间:2015-8-24 strttime:日期,如:2015-10-01 10:01:01 需要前导零 obj:显示倒计时的按钮,如果是链接的话就需要自行修改下边源码 */ function timer(strtime,obj) { ...
  • js倒计时器+防止刷新

    千次阅读 2014-03-22 16:04:37
    //读Cookie,返回值为相应Cookie的内容 function getCookie(cookieName){ var cookieContent = ''; var cookieAry = document.cookie.split("; ");//得到Cookie数组 for(var i=0;i;i++){
  • <p>I'm trying to change and image once using a function at the end of a javascript countdown. In the countdown script it says I can specify a function to call on complete. <pre><code>onComplete : ...
  • 项目中用到的一个倒计时器,直接上代码:1//JavaScriptDocument23/*4*author:argb5*contact:argb@live.cn6*7*Copyright©2011,Allrightsreserved8*/9/*10*e.g11*endDateParam:{year:2011,month:12...
  • javascript要实现这样的功能:在网页上设置一个时间倒计时器,进入页面以后触发调用一个js函数A(),A函数负责驱动一个外设装置,等待客户从设备输入以后,才能够得到函数的返回值。整个过程可能会很长,如果客户长...
  • 主要介绍了JavaScript分秒倒计时器实现方法,可实现按照毫秒倒计时的效果,具有一定参考借鉴价值,需要的朋友可以参考下
  • 今天做了一个手机短信发送倒计时,额,就是每隔多长时间可以重新发送的功能。贡献出来给园有吐槽点评。 //倒计时,time:时长(秒),scb:每秒回调,cb:计时完成回调 var timing = function (time, scb, cb) {...
  • js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ ...
  • 00:01:11:00 /* This notice must be untouched at all times.countdown.js v. 1.0The latest version is available athttp://blog.csdn.net/yjgx007Copyright (c) 2004 Xinyi.Chen. All rights r
  • js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释)csshtml,body{width:100%;height:100%;}.content{height:100%;...
  • 倒计时:1.设置一个有效的结束日期2.计算剩余时间3.将时间转换成可用的格式4.输出时钟数据作为一个可重用的对象5.在页面上显示时钟,并在它到达0时停止html天时分秒js代码/*计算剩余时间*/function getTimeReamin...
  • VBscript做计时器,遇到一个问题,怎么在页面上不断的调用一个VB函数呢…. 例如倒计时,如何让秒数在不刷新的情况下走动… 想了好久,查了好多地方都是用JavaScript做的… 最后才发现了一个,是VBscript帮助上都没有说的....
  • 本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下代码:全屏提示框#button{width: 150px;height: 50px;background-color: greenyellow;}.fullScreenDiv{/* 全屏div */display: ...
  • I have a javascript code that displays a count down timer from 5 minutes.This is the codevar minsvar secs;function cd() {mins = 1 * m("05"); // change minutes heresecs = 0 + s(":00"); // change second...
  • 本文实例讲述了js简单倒计时实现代码。分享给大家供大家参考,具体如下:距离活动结束还有天小时分秒var day = document.getElementById("day");var hours = document.getElementById("hours");var min = document....
  • jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效
  • html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效 html5 LED计时器_LED倒计时器样式特效
  • 主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下
  • <!... <...script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> <style type="text/css"> div{ border-bottom: 2px solid black; .

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,187
精华内容 3,674
关键字:

js倒计时器