JS實(shí)現(xiàn)倒計(jì)時(shí)和文字滾動(dòng)的效果實(shí)例
本文實(shí)例講述了JS實(shí)現(xiàn)倒計(jì)時(shí)和文字滾動(dòng)效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
說明：一般我們?cè)谝恍┨詫氼惖赇佒袝?huì)看到一些像搞競拍之類的活動(dòng)，從中我們時(shí)而會(huì)發(fā)現(xiàn)一些倒計(jì)時(shí)的效果，在一些年會(huì)等場合我們也會(huì)發(fā)現(xiàn)一些抽獎(jiǎng)活動(dòng)，從中我們也可以看到一些隨即滾動(dòng)的效果。這里給大家分享一種實(shí)現(xiàn)倒計(jì)時(shí)和文字滾動(dòng)的方法，希望可以對(duì)大家有所幫助。這里主要是通過js實(shí)現(xiàn)的。
一、倒計(jì)時(shí)效果的實(shí)現(xiàn)
前臺(tái)部分的完整代碼如下：
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒計(jì)時(shí)效果的實(shí)現(xiàn)</title>
</head>
<body>
<form runat="server">
<div id="timer">計(jì)算中。。。</div>
<script type="text/javascript">
var i = 0;
function TimeTo(dd, nowtstr) {
var t = new Date(dd), //取得指定時(shí)間的總毫秒數(shù)
n = (new Date(nowtstr)) - (-100 * i), //取得當(dāng)前毫秒數(shù)
c = t - n; //得到時(shí)間差
if (c <= 0) {//如果差小于等于0 也就是過期或者正好過期，則推出程序
document.getElementById('timer').innerHTML = '活動(dòng)已經(jīng)結(jié)束';
clearInterval(window['ttt']); //清除計(jì)時(shí)器
return; //結(jié)束執(zhí)行
}
var ds = 60 * 60 * 24 * 1000, //一天共多少毫秒
d = parseInt(c / ds), //總毫秒除以一天的毫秒 得到相差的天數(shù)
h = parseInt((c - d * ds) / (3600 * 1000)), //然后取完天數(shù)之后的余下的毫秒數(shù)再除以每小時(shí)的毫秒數(shù)得到小時(shí)
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //減去天數(shù)和小時(shí)數(shù)的毫秒數(shù)剩下的毫秒，再除以每分鐘的毫秒數(shù)，得到分鐘數(shù)
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //得到最后剩下的毫秒數(shù)除以1000 就是秒數(shù)，再剩下的毫秒自動(dòng)忽略即可
document.getElementById('timer').innerHTML = '<p style="margin-top:5px;"> <b>' + d + '</b> 天 <b>' + h + '</b> 小時(shí) <b>' + m + '</b> 分<b>' + s + '</b> 秒</p>'; //最后這里將固定格式的字符串 更新到 ID為 timer的 div中
i++;
}
(function () {
window['ttt'] = setInterval(function () {
// var timestr = "<%=EndTimeStr %>";//這里可以通過后臺(tái)向前臺(tái)傳遞活動(dòng)截止時(shí)間，注意要是"yyyy-MM-dd"這個(gè)格式的
// var nowtstr = "<%=NowTimeStr %>";//同樣這里也可以通過后臺(tái)向前臺(tái)傳遞當(dāng)前時(shí)間，注意也要是"yyyy-MM-dd"這個(gè)格式的
var timestr = "2013-10-21";//這里也可以自定義"yyyy-MM-dd"這個(gè)格式的截至活動(dòng)時(shí)間
var nowtstr = "2013-08-23";//這里也可以自定義"yyyy-MM-dd"這個(gè)格式的當(dāng)前時(shí)間
if (timestr != "") {
TimeTo(timestr, nowtstr); //定義倒計(jì)時(shí)的相差時(shí)間，注意格式
}
}, 100); //定義計(jì)時(shí)器，每隔100毫秒 也就是1秒 計(jì)算并更新 div的顯示
})();
</script>
</form>
</body>
</html>
補(bǔ)充：倒計(jì)時(shí)效果精簡版:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒計(jì)時(shí)精簡版效果的實(shí)現(xiàn)</title>
</head>
<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('活動(dòng)已經(jīng)結(jié)束');
clearInterval(aa);//清除定時(shí)器
}
var ds = 60 * 60 * 24 * 1000, //一天共多少毫秒
d = parseInt(c / ds), //總毫秒除以一天的毫秒 得到相差的天數(shù)
h = parseInt((c - d * ds) / (3600 * 1000)), //然后取完天數(shù)之后的余下的毫秒數(shù)再除以每小時(shí)的毫秒數(shù)得到小時(shí)
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //減去天數(shù)和小時(shí)數(shù)的毫秒數(shù)剩下的毫秒，再除以每分鐘的毫秒數(shù)，得到分鐘數(shù)
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //得到最后剩下的毫秒數(shù)除以1000 就是秒數(shù)，再剩下的毫秒自動(dòng)忽略即可
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> 時(shí)</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>
最終我們可以看到類似于如下圖所示的效果：
二、文字滾動(dòng)效果的實(shí)現(xiàn)
前臺(tái)代碼部分如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字滾動(dòng)效果的實(shí)現(xiàn)</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function TimeTo(dd) {
document.getElementById('TextBox1').value = dd; //最后這里將固定格式的字符串 更新到 ID為 TextBox1的文本框中
}
$(function(){
window['ttt'] = setInterval(aaa,100); //頁面加載的時(shí)候執(zhí)行
});
function stopInterval()
{
clearInterval(window['ttt']); //清除計(jì)時(shí)器
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="開始抽獎(jiǎng)" onClick="TimeTo2();"/>
<input type="button" value="獲取幸運(yùn)觀眾" onClick="stopInterval();"/>
</form>
</body>
</html>
最終實(shí)現(xiàn)的效果圖如下：
知識(shí)補(bǔ)充：
var myDate = new Date();
myDate.getYear(); //獲取當(dāng)前年份(2位)
myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
myDate.getMonth(); //獲取當(dāng)前月份(0-11,0代表1月)
myDate.getDate(); //獲取當(dāng)前日(1-31)
myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天)
myDate.getTime(); //獲取當(dāng)前時(shí)間(從1970.1.1開始的毫秒數(shù))
myDate.getHours(); //獲取當(dāng)前小時(shí)數(shù)(0-23)
myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)
myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)
myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)
myDate.toLocaleDateString(); //獲取當(dāng)前日期
var mytime=myDate.toLocaleTimeString(); //獲取當(dāng)前時(shí)間
myDate.toLocaleString( ); //獲取日期與時(shí)間
希望本文所述對(duì)大家基于js的web程序設(shè)計(jì)有所幫助。
相關(guān)文章
js面向?qū)ο笾Ｒ妱?chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
JS的語法非常靈活，簡單的對(duì)象創(chuàng)建就有好幾種不同的方法。這些過于靈活的地方有時(shí)候確實(shí)很讓人迷惑，那么今天我們就來梳理一下JS中常用的創(chuàng)建對(duì)象的幾種方法吧2015-11-11
下面的內(nèi)容介紹了#號(hào)的使用，因?yàn)樵趗rl中多個(gè)#號(hào)代表不同的意義與區(qū)別。2011-02-02
JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能,涉及javascript與jQuery的事件響應(yīng)、頁面元素動(dòng)態(tài)操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
JavaScript監(jiān)聽和禁用瀏覽器回車事件實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽和禁用瀏覽器回車事件實(shí)例,本文直接給出示例代碼,需要的朋友可以參考下2015-01-01
JQuery是一個(gè)很明顯的自執(zhí)行閉包的例子，有需要的朋友可以參考一下2013-06-06
快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法
本篇文章主要介紹了快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法，有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用html2Canvas打印高清PDF的效果，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以了解一下2023-07-07
本篇文章主要介紹了JS異步加載的三種實(shí)現(xiàn)方式，有些時(shí)候我們需要JS異步加載，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
js實(shí)現(xiàn)隨機(jī)抽選效果、隨機(jī)抽選紅色球效果
本文主要分享了js實(shí)現(xiàn)隨機(jī)抽選效果、隨機(jī)抽選紅色球效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了淺談小程序 setData學(xué)問多，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02