注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

js精美倒计时工具-css3  

2013-10-31 18:06:38|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
js精美倒计时工具-css3 - 湖小叶叶 - 米欧光影工作室
 
缺点:
1. css不够美观,

2. js不直观,有空继续优化。已经优化。原始函数也在本文中保留。



代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0022)http:////aboutie456789/ -->
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>考研倒计时</title>


<style>

/*reset*/
html { color: #000000; line-height: 1.5;}
body { font: 12px/1.5 arial,sans-serif; background:#efefef}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0; padding: 0;}
ol, ul { list-style: none outside none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}

a { text-decoration: none;}
*::-moz-placeholder { color: #CCCCCC;}


#wrap { word-break: break-all; word-wrap: break-word;
margin:0 auto; padding:50px; border:#fff 5px solid; display:solid;
width:990px;
padding:35px;}












/*计时器区域总体样式*/
#my_timer {
color: #666666;

/*
font-size: 12px;
padding: 4px;
*/

text-align: center;
font: 14px/1.3 'Segoe UI',Arial, sans-serif;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);

width:420px; height:40px;
padding:20px; margin: 10px auto;
border-radius:20px;

border:2px solid #FE0859;
background:#afafaf;
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
}


#my_timer:hover{
color:#fff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
background:#FE0859;
}





/*计时器数字的样式*/
.timer{ font:20px arial; margin:0 5px;}

.timer,
.digit{
display:inline-block;
width:2em;
background-color:#444;
border-radius:0.2em;
text-align:center;
color:#fff;
letter-spacing:-1px;
}


.timer,
.digit.static{
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);

background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #3A3A3A),
color-stop(0.5, #444444)
);
}
</style>
</head>

<body>

<!-- clear:both; -->
<div style="display:block; clear:both; overflow:hidden; height:20px;"></div>


<!-- 倒计时区域 -->
<div id="my_timer"></div>






<script type="text/javascript">
//预先定义的函数和常数
var my_insert=document.getElementById("my_timer");
var KAOYAN= new Date("Jan 14,2014"); //考研的时间
var s = "2014研究生考试";










//主函数
function getTimer(){
window.setTimeout("getTimer()", 1000);

var now = new Date(); //当前时间

var ts = KAOYAN - now; //计算剩余的毫秒数
var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数

var dd = checkTime(dd); //console.log(dd);
var hh = checkTime(hh);
var mm = checkTime(mm);
var ss = checkTime(ss);


var my_string = "<p class=>今天是"+now + " <br />" +"距"+s+"还有<span class=timer>";
my_string += dd+"</span>天<span class=timer>"+hh+"</span>小时<span class=timer>"+mm+"</span>分<span class=timer>"+ss+"</span>秒";

document.getElementById("my_timer").innerHTML = my_string;
}





//原始js主函数,可以删除了。
function getTimer2(){
window.setTimeout("getTimer2()", 1000);

var now = new Date(); //当前时间
var myday = KAOYAN.getTime() - now.getTime(); //我的可用时间
var my_d = Math.floor(myday / (1000 * 60 * 60 * 24)); //倒计时天数

var timeold=myday; //timeold=(BirthDay.getTime()-today.getTime());
secondsold=Math.floor(timeold/1000);

msPerDay=24*60*60*1000; e_daysold=timeold/msPerDay;
daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold); e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);

my_string = "<p class=>今天是"+now + " <br />" +"距"+s+"还有<span class=timer>";
my_string += my_d+"</span>天<span class=timer>"+hrsold+"</span>小时<span class=timer>"+minsold+"</span>分<span class=timer>"+seconds+"</span>秒";

my_insert.innerHTML=( my_string );
}


//如果时分秒是个位,前面补零
function checkTime(i){
if (i < 10) {
i= "0" + i;
}
return i;
}


getTimer();
</script>

</body>
</html>


refer
原创
  评论这张
 
阅读(520)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017