页面中自动倒计时

1.页面中添加以下脚本

<script type="text/javascript">
   var m = 60; //总的时间,分
   var s=0; //秒
   function clock(){
    s = s -1;
    if(s<=0){
     m=m - 1;
     s=60;
    }
    if(document.getElementById("info")){
     document.getElementById("mm").innerHTML =m;
     document.getElementById("ss").innerHTML =s;
    }
    if(m > 0){
     setTimeout("clock();",1000);
    }else{
     document.getElementById("enddate").value=getDateTime();
     alert("时间到!"); 

     //此处调用时间到后的处理函数
     save();
    }
   } 
  </script>
  <script type="text/javascript">
  //控制显示时间的div位置
  function setdiv(){
   var scrollleft=document.body.scrollLeft;
   var scrolltop=document.body.scrollTop;
   var clientwidth=document.body.clientWidth;
   var clientheight=document.body.clientHeight
   //alert(scrollleft+"dd"+scrolltop+"aaa"+clientwidth+"a"+clientheight);
   info.style.left=scrollleft + clientwidth /2  - 133;
   info.style.top=scrolltop + clientheight  - 149;
  }
  
  </script>

 

2.页面中添加修改部分

<body onLoad="setdiv();" οnscrοll="setdiv();">
  
  <div id="info">
   <table>
    <tr>
     <td>
      开始时间:
      <b id="ks"></b>
     </td>
    </tr>
    <tr>
     <td>
      剩余时间:
      <font color='red' size='5'><b id="mm">60</b>分<b id="ss">0</b>秒</font>
     </td>
    </tr>
    <tr>
     <td>
      <input type="button" name="button" value="保存" οnclick="save();" />
     </td>
    </tr>
   </table>
  </div>

 

  <div id="Layer2">

  

  </div>

</body>

3.注意事项

如果想让显示时间的div在最上边,应添加css样式控制div

<style type="text/css">
<!--
#info {
 position:absolute;
 left:14px;
 top:12px;
 width:266px;
 height:149px;
 z-index:2;
 background-color: #009966;
}
#Layer2 {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 z-index:1;
}
-->
 </style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值