提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS实现倒计时和文字滚动的效果实例

JS实例 实现 效果 文字 滚动 倒计时
2023-06-13 09:15:29 时间

本文实例讲述了JS实现倒计时和文字滚动效果的方法。分享给大家供大家参考。具体实现方法如下：

说明：一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动，从中我们时而会发现一些倒计时的效果，在一些年会等场合我们也会发现一些抽奖活动，从中我们也可以看到一些随即滚动的效果。这里给大家分享一种实现倒计时和文字滚动的方法，希望可以对大家有所帮助。这里主要是通过js实现的。

一、倒计时效果的实现

前台部分的完整代码如下：

复制代码代码如下:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  <title>倒计时效果的实现</title>
</head>
<body>
<formrunat="server">
   <divid="timer">计算中。。。</div>
   <scripttype="text/javascript">
       vari=0;
       functionTimeTo(dd,nowtstr){
           vart=newDate(dd),//取得指定时间的总毫秒数
       n=(newDate(nowtstr))-(-100*i),//取得当前毫秒数
       c=t-n;//得到时间差
           if(c<=0){//如果差小于等于0 也就是过期或者正好过期，则推出程序
               document.getElementById("timer").innerHTML="活动已经结束";
               clearInterval(window["ttt"]);//清除计时器
               return;//结束执行
           }
           vards=60*60*24*1000,//一天共多少毫秒
       d=parseInt(c/ds),//总毫秒除以一天的毫秒得到相差的天数
       h=parseInt((c-d*ds)/(3600*1000)),//然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时
       m=parseInt((c-d*ds-h*3600*1000)/(60*1000)),//减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数
       s=parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000); //得到最后剩下的毫秒数除以1000就是秒数，再剩下的毫秒自动忽略即可
           document.getElementById("timer").innerHTML="<pstyle="margin-top:5px;"><b>"+d+"</b>天<b>"+h+"</b>小时<b>"+m+"</b>分<b>"+s+"</b>秒</p>";//最后这里将固定格式的字符串更新到ID为timer的div中
           i++;
       }
       (function(){
           window["ttt"]=setInterval(function(){
//               vartimestr="<%=EndTimeStr%>";//这里可以通过后台向前台传递活动截止时间，注意要是"yyyy-MM-dd"这个格式的
//               varnowtstr="<%=NowTimeStr%>";//同样这里也可以通过后台向前台传递当前时间，注意也要是"yyyy-MM-dd"这个格式的
               vartimestr="2013-10-21";//这里也可以自定义"yyyy-MM-dd"这个格式的截至活动时间
               varnowtstr="2013-08-23";//这里也可以自定义"yyyy-MM-dd"这个格式的当前时间
               if(timestr!=""){
                   TimeTo(timestr,nowtstr);//定义倒计时的相差时间，注意格式
               }
           },100);//定义计时器，每隔100毫秒也就是1秒计算并更新div的显示
       })();
</script>
   </form>
</body>
</html>

补充：倒计时效果精简版:

复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>倒计时精简版效果的实现</title>
</head>

<body>
<formrunat="server">
<tableborder="1">
<tr>
<thid="day"width="100"></th>
<thid="day2"width="100"></th>
<thid="day3"width="100"></th>
<thid="day4"width="100"></th>
</tr>
</table>
<scripttype="text/javascript">
functiontimestr()
{
   varc=Date.parse("2014-11-11")-Date.parse((newDate()));
   if(c<=0)
   {
       alert("活动已经结束");
       clearInterval(aa);//清除定时器
   }
      vards=60*60*24*1000,//一天共多少毫秒
       d=parseInt(c/ds),//总毫秒除以一天的毫秒得到相差的天数
       h=parseInt((c-d*ds)/(3600*1000)),//然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时
       m=parseInt((c-d*ds-h*3600*1000)/(60*1000)),//减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数
       s=parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000); //得到最后剩下的毫秒数除以1000就是秒数，再剩下的毫秒自动忽略即可
           document.getElementById("day").innerHTML="<pstyle="margin-top:5px;"><b>"+d+"</b>天</p>";
           document.getElementById("day2").innerHTML="<pstyle="margin-top:5px;"><b>"+h+"</b>时</p>";
           document.getElementById("day3").innerHTML="<pstyle="margin-top:5px;"><b>"+m+"</b>分</p>"
           document.getElementById("day4").innerHTML="<pstyle="margin-top:5px;"><b>"+s+"</b>秒</p>"
}
varaa=setInterval(timestr,1000);
</script>
 </form>

</body>
</html>

最终我们可以看到类似于如下图所示的效果：

二、文字滚动效果的实现

前台代码部分如下：

复制代码代码如下:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  <title>文字滚动效果的实现</title>
  <scripttype="text/javascript"src="jquery-1.6.2.min.js"></script>
 <scripttype="text/javascript">
     functionTimeTo(dd){         
         document.getElementById("TextBox1").value=dd;//最后这里将固定格式的字符串更新到ID为TextBox1的文本框中
     }

     $(function(){
         window["ttt"]=setInterval(aaa,100);//页面加载的时候执行
 });

     functionstopInterval()
     {
         clearInterval(window["ttt"]);//清除计时器
         window["ttt"]="";
         varaa="张三,李四,王五,赵六,孙七,胡八,曾九,刘十,伊一,朴二";
         vararr=aa.split(",");
         varrdd=9*Math.random();
         varleth=Math.round(rdd);
         varleths=arr[leth].toString();
         document.getElementById("TextBox1").value=leths;
     }
   functionaaa(){
         varaa="张三,李四,王五,赵六,孙七,胡八,曾九,刘十,伊一,朴二";
         vararr=aa.split(",");
         varrdd=9*Math.random();
         varleth=Math.round(rdd);
         varleths=arr[leth].toString();
         TimeTo(leths)
         } 
     
     functionTimeTo2(){
         if(window["ttt"]==""){
         window["ttt"]=setInterval(aaa,100);
       }
     }
 </script>
</head>
<body>
<formrunat="server">
<inputtype="text"id="TextBox1"/>
<inputtype="button"value="开始抽奖"onClick="TimeTo2();"/>
<inputtype="button"value="获取幸运观众"onClick="stopInterval();"/>
</form>
</body>
</html>


最终实现的效果图如下：


知识补充：

varmyDate=newDate();
myDate.getYear();//获取当前年份(2位)
myDate.getFullYear();//获取完整的年份(4位,1970-????)
myDate.getMonth();//获取当前月份(0-11,0代表1月)
myDate.getDate();//获取当前日(1-31)
myDate.getDay();//获取当前星期X(0-6,0代表星期天)
myDate.getTime();//获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();//获取当前小时数(0-23)
myDate.getMinutes();//获取当前分钟数(0-59)
myDate.getSeconds();//获取当前秒数(0-59)
myDate.getMilliseconds();//获取当前毫秒数(0-999)
myDate.toLocaleDateString();//获取当前日期
varmytime=myDate.toLocaleTimeString();//获取当前时间
myDate.toLocaleString();//获取日期与时间

希望本文所述对大家基于js的web程序设计有所帮助。

相关文章