本文實例講述了JS實現倒計時和文字滾動效果的方法。分享給大家供大家參考。具體實現方法如下：
說明：一般我們在一些淘寶類店鋪中會看到一些像搞競拍之類的活動，從中我們時而會發現一些倒計時的效果，在一些年會等場合我們也會發現一些抽獎活動，從中我們也可以看到一些隨即滾動的效果。這里給大家分享一種實現倒計時和文字滾動的方法，希望可以對大家有所幫助。這里主要是通過js實現的。
一、倒計時效果的實現
前臺部分的完整代碼如下：
補充：倒計時效果精簡版:
<body>
<form runat="server">
<table border="1">
<tr>
<th id="day" width="100"></th>
<th id="day2"width="100"></th>
<th id="day3"width="100"></th>
<th id="day4"width="100"></th>
</tr>
</table>
<script type="text/javascript">
function timestr()
{
var c = Date.parse("2014-11-11")-Date.parse((new Date()));
if(c<=0)
{
alert('活動已經結束');
clearInterval(aa);//清除定時器
}
var ds = 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 = '<p style="margin-top:5px;"> <b>' + d + '</b>天 </p>';
document.getElementById('day2').innerHTML = '<p style="margin-top:5px;"> <b>' + h + '</b> 時</p>';
document.getElementById('day3').innerHTML = '<p style="margin-top:5px;"> <b>' + m + '</b> 分</p>'
document.getElementById('day4').innerHTML = '<p style="margin-top:5px;"> <b>' + s + '</b> 秒</p>'
}
var aa = setInterval(timestr,1000);
</script>
</form>
</body>
</html>
最終我們可以看到類似于如下圖所示的效果：
二、文字滾動效果的實現
前臺代碼部分如下：
$(function(){
window['ttt'] = setInterval(aaa,100); //頁面加載的時候執行
});
function stopInterval()
{
clearInterval(window['ttt']); //清除計時器
window['ttt']="";
var aa = "張三,李四,王五,趙六,孫七,胡八,曾九,劉十,伊一,樸二";
var arr = aa.split(',');
var rdd = 9 * Math.random();
var leth = Math.round(rdd);
var leths = arr[leth].toString();
document.getElementById('TextBox1').value = leths;
}
function aaa() {
var aa = "張三,李四,王五,趙六,孫七,胡八,曾九,劉十,伊一,樸二";
var arr = aa.split(',');
var rdd = 9 * Math.random();
var leth = Math.round(rdd);
var leths = arr[leth].toString();
TimeTo(leths)
}
function TimeTo2(){
if(window['ttt']==""){
window['ttt'] = setInterval(aaa,100);
}
}
</script>
</head>
<body>
<form runat="server">
<input type="text" id="TextBox1"/>
<input type="button" value="開始抽獎" onClick="TimeTo2();"/>
<input type="button" value="獲取幸運觀眾" onClick="stopInterval();"/>
</form>
</body>
</html>
知識補充：
var myDate = new Date();
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(); //獲取當前日期
var mytime=myDate.toLocaleTimeString(); //獲取當前時間
myDate.toLocaleString( ); //獲取日期與時間
希望本文所述對大家基于js的web程序設計有所幫助。
新聞熱點
疑難解答
