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

来源：阅读：746 次日期：2014-11-03 14:12:29

温馨提示：小编为您整理了“JS实现倒计时和文字滚动的效果实例”,方便广大网友查阅！

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

一、倒计时效果的实现

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

代码如下:

<title>倒计时效果的实现</title>

</head>

<body>

var i = 0;

function TimeTo(dd, nowtstr) {

var t = new Date(dd), //取得指定时间的总毫秒数

n = (new Date(nowtstr)) - (-100 * i), //取得当前毫秒数

c = t - n; //得到时间差

if (c <= 0) {//如果差小于等于0 也就是过期或者正好过期，则推出程序

document.getElementById('timer').innerHTML = '活动已经结束';

clearInterval(window['ttt']); //清除计时器

return; //结束执行

}

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('timer').innerHTML = '<p style="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 () {

// var timestr = "<%=EndTimeStr %>";//这里可以通过后台向前台传递活动截止时间，注意要是"yyyy-MM-dd"这个格式的

// var nowtstr = "<%=NowTimeStr %>";//同样这里也可以通过后台向前台传递当前时间，注意也要是"yyyy-MM-dd"这个格式的

var timestr = "2013-10-21";//这里也可以自定义"yyyy-MM-dd"这个格式的截至活动时间

var nowtstr = "2013-08-23";//这里也可以自定义"yyyy-MM-dd"这个格式的当前时间

if (timestr != "") {

TimeTo(timestr, nowtstr); //定义倒计时的相差时间，注意格式

}

}, 100); //定义计时器，每隔100毫秒也就是1秒计算并更新 div的显示

})();

</script>

</form>

</body>

</html>

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

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>倒计时精简版效果的实现</title>

</head>

<body>

<tr>

</tr>

</table>

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>

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

二、文字滚动效果的实现

前台代码部分如下：

代码如下:

<title>文字滚动效果的实现</title>

function TimeTo(dd) {

document.getElementById('TextBox1').value = dd; //最后这里将固定格式的字符串更新到 ID为 TextBox1的文本框中

}

$(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>

</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( ); //获取日期与时间

更多信息请查看IT技术专栏

上一篇：js实现ArrayList功能附实例代码

下一篇：JS获取浏览器语言动态加载JS文件示例代码

手机网站地址：JS实现倒计时和文字滚动的效果实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！