• [转blueidea]倒计时效果


    <!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>倒计时</title>
    <style type="text/css">
    body{font-size:12px;}
    #years{40px; font-size:12px;}
    select{font-size:12px;}
    #days{font-size:12px; 20px;}
    label{margin:0 4px;}
    #divYear{150px; padding:5px; border:1px solid #999; -moz-border-radius:5px; -moz-box-shadow:2px 2px 1px #ccc; word-wrap:break-word;}
    #divYear a{cursor:pointer;padding:1px 4px;}
    #divYear a:hover{background:#ccc; color:#fff;}
    </style>
    <script type="text/javascript">
     function addLoadEvent(func){
      var oldonload = window.onload;
      if (typeof window.onload != "function") {
       window.onload = func;
      }
      else {
       window.onload = function(){
        oldonload();
        func();
       }
      }
     }
     
     function startTime() 
     { 
      var weekday = new Array(7);
       weekday[0] = "星期日" 
       weekday[1] = "星期一" 
       weekday[2] = "星期二" 
       weekday[3] = "星期三" 
       weekday[4] = "星期四" 
       weekday[5] = "星期五" 
       weekday[6] = "星期六" 
      
     var today=new Date() 
     var year=today.getFullYear() 
     var month=today.getMonth()+1 
     var day=today.getDate() 
     var week= weekday[today.getDay()] 
     var h=today.getHours() 
     var m=today.getMinutes() 
     var s=today.getSeconds()  
     month=checkTime(month) 
     day=checkTime(day) 
     h=checkTime(h) 
     m=checkTime(m) 
     s=checkTime(s) 
     document.getElementById('today').innerHTML="今天是"+year+"年"+month+"月"+day+"日 "+week+" "+h+":"+m+":"+s 
     t=setTimeout('startTime()',500) 
     } 
     
     keyYear = ""
     keyNumMonth = ""
     keyDay = ""
     function fDate(){
      keyYear = document.getElementById("years").value;
      keyMonth = document.getElementById("months").value;
      keyNumMonth = document.getElementById("months").selectedIndex;
      keyDay = document.getElementById("days").value;
      keyTime = keyMonth + " " + keyDay + "," + keyYear;
      countDown(keyTime);
      setTimeout("fDate()",500)
      
     }
      
     function countDown(j){
      var nowDate = new Date();//实例化
      var nowTime = nowDate.getTime();//获得当前日期的毫秒数
      var newTime = Date.parse(j);//获得目标日期的毫秒数
      var eTime =  parseInt((Math.abs(newTime-nowTime))/1000) //得到秒数
      
      var eS = eTime%60;//取余得到秒
      var eM = parseInt(eTime/60)
      var eMM = eM%60;//取余得到分钟,以后的方法就一样了
      var eH = parseInt(eM/60);
      var eD = parseInt(eH/24);
      var eH = eH%24;
      eS = checkTime(eS);
      eMM = checkTime(eMM);
      document.getElementById("txt").innerHTML="距离"+keyYear+"年"+keyNumMonth+"月"+keyDay+"日 还有"+eD+"天"+eH+"小时"+eMM+"分"+eS+"秒"
     }
     
     function checkTime(i) 
     { 
     if (i<10)  
       {i="0" + i} 
       return i 
     }
     addLoadEvent(startTime);
    </script>
    </head>
    <body>
     <div id="today"></div>
     <form>
     <h3>请输入要计算的日期</h3>
     <p><input type="text" value="" id="years" /><label>年</label><select id="months"><option>--</option><option value="jan" class="1">1</option><option value="feb">2</option><option value="mar">3</option><option value="apr">4</option><option value="may">5</option><option value="jun">6</option><option value="jul">7</option><option value="aug">8</option><option value="sep">9</option><option value="oct">10</option><option value="nov">11</option><option value="dec">12</option></select><label>月</label><input type="text" value="" id="days" /><label>日</label></p>
     <p><input type="button" value="计算" onclick="fDate()" /></p>
        </form>
     <p id="txt" style="color:#f00"></p>
    </body>
    </html>

  • 相关阅读:
    第4次作业(条件)比较大小。第3次作业(条件)计算火车运行时间。
    GitHub搜索技巧
    flex实现左中固定不变,右边自适应
    JavaScript高级__原型继承+组合继承
    JavaScript高级__深入了解闭包
    JavaScript高级__执行上下文代码案例
    JavaScript中的显式原型链 prototype 和隐式原型 __proto__
    谷歌强大插件收集,持续更新。。。
    js中~~和^=
    vue自定义指令----directive
  • 原文地址:https://www.cnblogs.com/leotan/p/1805918.html
Copyright © 2020-2023  润新知