您的位置：首页 > Web前端 > JQuery

jquery实战9：高级特效倒计时效果

2015-06-06 12:11 741 查看

jquery实战9：高级特效倒计时效果

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<style type="text/css">

*{margin:0px;padding:0px;font-family:"微软雅黑";}

.main{width:400px;height:400px;background:black;border:4px solid #ccc;margin:100px auto;box-shadow: 0px 0px 10px #000;}

.main h3{color:#fff;font-size:24px;text-align:center;box-shadow: 0px 0px 10px #fff;margin:40px 0px 0px;}

.main .time{padding:20px;color:#fff;font-size:18px;}

.main .time input{width:60px;height:30px;margin:5px;border:1px solid #ccc;text-align:center;font-size:14px;box-shadow:0px 0px 10px #fff;border-radius:10px;}

.main .time input:hover{border:1px solid red;}

.main .time input.time3{border-radius:0px;width:100px;height:40px;margin-left:130px;font-size:18px;font-weight:bold;margin-top:40px;}

.main .time input:hover.time3{border:1px solid #000;}

.main .dis_time{color:#fff;margin:20px;text-align:center;line-height:30px;font-size:18px;}

.main .dis_time span{width:60px;height:35px;display:inline-block;background:#fff;color:#fff;margin:0px 3px;font-size:22px;text-shadow: 1px 1px 2px #000, 1px 1px 2px #000,1px 1px 2px #000,2px 2px 1px blue;}
</style>

   <script type="text/javascript" src="js/jquery.js">

</script>

</head>

<body>

<div class="main">

<h3>开始倒计时</h3>

<div class="time">

  <form>

  结束时间:<input type="text"/> 年<input type="text"/>月<input type="text"/>日

  <input class="time3" type="button" value="开始计时"/>

  </form>

</div>

<div class="dis_time">

<span>000</span>天<span>00</span>时<span>00</span>分<span>00</span>秒

</div>



<div>

<script type="text/javascript" >

//alert(1);

$(".main .time input.time3").click(function(){//计时开始按钮点击事件绑定以下两个方法。

uptimes();//确保点击计时开始按钮后立即更新获取的时间。

setInterval(uptimes,1000);//定时器定时更新调用时间获取函数

});

/*获取时间函数开始*/

function uptimes(){

var years=$(".main .time input").eq(0).val();

var months=$(".main .time input").eq(1).val();

var days=$(".main .time input").eq(2).val();

//alert(years+"年"+months+"月"+days+"日");

    var overtime=new Date();//定义一个日期对象为了接收输入框的数值。这里的值还是当前事件，通过后面的对象赋值，重新定义对象元素的各个值

var newdate= new Date();//定义一个日期对象为当前的事件对象
/*为第一个日期对象赋值：分别是年月日时分秒的方法赋值*/

overtime.setFullYear(years);

overtime.setMonth(months-1);//这里减去1，因为外国的月份从0月开始的。

overtime.setDate(days);

overtime.setHours(0);

overtime.setMinutes(0);

overtime.setSeconds(0);

/*为第一个日期对象赋值结束*/
var s=overtime.getTime()-newdate.getTime();//获取倒计时的毫秒数，第一个日期对象-第二个当前时间对象的差值，结果为毫秒数，下面进行转换天时分秒的方法。

d=Math.floor(s/86400000);//除去一天的毫秒数取整得到倒计时的天数

h=(s-d*86400000)/3600000;//总毫秒数减去倒计时的天数乘以一天的毫秒数，除以一个小时的毫秒数得到倒计时的天数。

nh=Math.floor(h);//取整才是正式的天数

f=(s-d*86400000-nh*3600000)/60000;//同小时的获取一样的方式

nf=Math.floor(f);

m=(s-d*86400000-nh*3600000-nf*60000)/1000;//同小时的获取一样的方式

nm=Math.floor(m);





   $(".main .dis_time span").eq(0).html(fullzero(d,3));//调用补零方法，将返回值做为内容更新到span标签里。

   $(".main .dis_time span").eq(1).html(fullzero(nh,2));//同上

   $(".main .dis_time span").eq(2).html(fullzero(nf,2));//同上

   $(".main .dis_time span").eq(3).html(fullzero(nm,2));//同上

};

/*获取时间函数结束*/
/*时间格式自动补零函数开始*/

function fullzero(op1,op2){//传入上面的连个参数，op1为时分秒，0p2为天时分秒的位数：3或2位；

  str=""+op1;//数值型参数转为字符传，根据字符串的长度作为判断的条件

  while(str.length<op2){

   str="0"+str;//小于参数op2长度的字符串循环加0，知道不满足条件字符串长度大于参数OP2时退出。

  };

return str;//返回字符串值给调用的地方。
};

/*时间格式自动补零函数结束*/

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航