JavaScript

超轻量级php框架startmvc

基于JavaScript实现活动倒计时效果

更新时间:2020-05-07 11:42:01 作者:startmvc
本文实例为大家分享了js倒计时效果的具体代码,供大家参考,具体内容如下<!DOCTYPEhtml>

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


<!DOCTYPE html> 
<html> 
 <head> 
 <title>countDown</title> 
 <style type="text/css"> 
 #mydiv{ 
 width:150px; 
 background-color:green; 
 margin:0 auto; 
 padding:0 auto; 
 color:pink; 
 } 
 </style> 
 <script type="text/javascript"> 
 <!-- 秒数可修改--> 
 var second=50; 
 <!-- 分钟可修改--> 
 var minute=1; 
 <!-- 小时可修改--> 
 var hour=1; 
 <!-- 天数可修改--> 
 var day=1; 
 var flag=false; 
 function countDown(){ 
 var div=document.getElementById("mydiv"); 
 second-=1; 
 if(second==0){ 
 minute=minute-1; 
 second=60; 
 if(minute<0){ 
 hour=hour-1; 
 minute=59; 
 if(hour<0){ 
 day-=1; 
 hour=23; 
 if(day<0){ 
 flag=true; 
 } 
 } 
 } 
 } 
 if(flag){ 
 div.innerHTML="活动结束!"; 
 }else{ 
 div.innerHTML="距离活动时间还剩:"+day+"天"+hour+"小时"+minute+"分"+second+"秒"; 
 } 
 } 
 setInterval("countDown()",1000); 
 </script> 
 </head> 
 <body> 
 <div id="mydiv">倒计时</div> 
 </body> 
</html>

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

js 倒计时