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

米欧互联

No matter what you want to express……

 
 
 

日志

 
 

js数字时钟  

2013-11-14 23:11:23|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图
 js数字时钟 - 湖小叶叶 - 米欧光影工作室
 
很简单的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Digital Clock</title>
<script type="text/javascript">

/*返回汉语习惯的星期*/
function getWeekDay(d){//输入一个日期,返回星期
var str="";//初始化
var md = d.getDay(); //从 Date 对象返回一周中的某一天 (0 ~ 6)。
switch(md)
{
case 0:
str = "日";
break;
case 1:
str = "一";
break;
case 2:
str = "二";
break;
case 3:
str = "三";
break;
case 4:
str = "四";
break;
case 5:
str = "五";
break;
case 6:
str = "六";
break;
}
return "星期" + str;
}

function displayTime() {
var elt = document.getElementById("clock");
var now = new Date();
elt.innerHTML = now.getFullYear() + "-" + now.getMonth()+ "-<span>" + now.getDay() + "</span> ";
elt.innerHTML += now.toLocaleTimeString() + " " + getWeekDay(now);
setTimeout(displayTime,1000);
}
window.onload = displayTime;
</script>

<style type="text/css">
#clock{
font:bold 30px "微软雅黑", sans;
color: #333;
background:#fefefe;
border: solid #efeeef 1px;

padding:10px;
border-radius: 10px;

sline-height:60px;
}

#clock span{color:#f00;}


.shadow{
text-align: left;
overflow: hidden;
background: #fff;
border: 1px solid #dbdbdb;
border-top: none;

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.middle{
width: 990px;
margin: 0 auto 0;
color: #676767;

padding:30px;
}
</style>
</head>

<body>

<div class="middle">
<h1>Digital Clock</h1>

<span id="clock" class="shadow"></span>
</div>

</body>
</html>



我推测你想要这个效果:
http://poster469.blog.163.com/blog/static/131911342013103295714/
js数字时钟 - 湖小叶 - 米欧光影工作室
 


---
  评论这张
 
阅读(1090)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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