您的位置：首页 > 其它

一个简单的多背景时间显示网页

2015-07-30 14:18 387 查看

前段时间突然想到做一个显示时间的网页，虽然功能十分简单，但是做出来感觉效果还是很不错的。

代码十分简单，通过Date()方法获取时间并分别获取具体的年月日时分秒，为了格式的统一在显示的时候需要判断时间位数，即当时间位数小于10时在前面加"0"，这样能有效避免显示时出现的跳动问题。

同时我觉得单一的背景比较单调，所以添加了更多的背景并可以通过点击按钮来切换主题和实现显示的颜色，当然实现的方法也是很笨拙的，在下面的代码里面就可以看出来。当然以后深入学了js和jQuery之后，还可以进一步添加效果。

下面是网页的效果图：

【下面是网页的代码】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TIME</title>
</head>
<style>
body{
background-image:url(6.jpg);
background-size: 100%;
}
#main{
width: 800px;
height: 200px;
padding:30px;
font-size: 110px;
font-family:Snell Roundhand; /*Kokonor*/
color:#FFC977;
margin-top: 150px;
letter-spacing: 8px;
}
#footer{
letter-spacing: 1px;
width:99%;
font-size: 12px;
position: absolute;
bottom: 0px;
text-align: center;
color:#808080;
background:#1b1b1b;
padding:10px 0;
}
.bg{
margin-top: 140px;
}
a{
display: inline-block;
width: 12px;
height: 12px;
background-color: white;
}
#a1{background-color:#;}
#a2{background-color:#77C9FF;}
#a3{background-color:#FFC266}
#a4{background-color:#B888FF;}
#a5{background-color:#F87C2A;}
#a6{background-color:#88FF88;}
</style>

<body>
<center>
<div id="main">
<span id="day"></span><br>
<span id="time"></span>
<div>
<div class="bg">
<a id="a1" href="#"></a>
<a id="a2" href="#"></a>
<a id="a3" href="#"></a>
<a id="a4" href="#"></a>
<a id="a5" href="#"></a>
<a id="a6" href="#"></a>
</div>
</center>
<div id="footer">COPYRIGHT ©2015 RAYCHAN All RIGHT RESERVED</div>
</body>

<script>
//时间显示函数
function clock(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var nowDay = year+'-'+(month<10?('0'+month):month)+'-'
+(day<10?('0'+day):day);　　
var nowTime = (hour<10?('0'+hour):hour)+':'
+(minute<10?('0'+minute):minute)+':'+(second<10?('0'+second):second);
document.getElementById('day').textContent = nowDay;
document.getElementById('time').textContent = nowTime;
}
//设置函数执行的时间间隔，效果即每秒钟秒针跳动一次
var int = setInterval(clock, 1000);

/*设置小图标按钮效果，即点击图标切换背景图，这里应该有更好的方法，
即通过this传参来判断a标签并设置相应的图片，这样可以大大减少代码量。
另外也可以在a标签里面设置click动作来执行函数.
在点击图标是也可以同时修改文字字体，这里就不再添加了*/
var main = document.getElementById('main');
var a = document.getElementsByTagName('a');
a[0].onclick = function(){
document.body.style.backgroundImage="url(1.jpg)";
main.style.color = "#7777FF";
// main.style.fontFamily = "Kokonor";
}
a[1].onclick = function(){
document.body.style.backgroundImage="url(2.jpg)";
main.style.color = "#EE6666";
// main.style.fontFamily = "Arial";
}
a[2].onclick = function(){
document.body.style.backgroundImage="url(3.jpg)";
main.style.color = "#EB4848";
// main.style.fontFamily = "sans-serif";
}
a[3].onclick = function(){
document.body.style.backgroundImage="url(4.jpg)";
main.style.color = "#66E0FF";
// main.style.fontFamily = "Monaco";
}
a[4].onclick = function(){
document.body.style.backgroundImage="url(5.jpg)";
main.style.color = "#FFFFFF";
// main.style.fontFamily = "Skia";
}
a[5].onclick = function(){
document.body.style.backgroundImage="url(6.jpg)";
main.style.color = "#FFC977";
// main.style.fontFamily = "Iowan Old Style";
}
</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航