DIV和时间输出的结合练习
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>JS控制DIV</title>
<style type="text/css">
#box{width:50px;height:50px;background:red;margin:20px auto;text-align:center;line-height:50px;}
</style>
</head>
<body>
<script type="text/javascript">
var nowday = new Date();
var box;
var month = new Array(12)
month[0]="一月"
month[1]="二月"
month[2]="三月"
month[3]="四月"
month[4]="五月"
month[5]="六月"
month[6]="七月"
month[7]="八月"
month[8]="九月"
month[9]="十月"
month[10]="十一月"
month[11]="十二月"
var nowmonth = month[nowday.getMonth()];
window.onload=function(){
box=document.getElementById('box')
}
function width1(){
box.style.width="600px";
box.style.background="#483D8B";
box.innerHTML = nowday
}
function cir1(){
box.style.width="100px";
box.style.height="100px";
box.style.borderRadius="50px";
box.style.lineHeight="100px";
box.style.background="#1E90FF";
box.innerHTML = nowday.getFullYear()+"年";
}
function bor1(){
box.style.width="100px";
box.style.height="100px";
box.style.borderRadius="50px";
box.style.lineHeight="100px";
box.style.border="2px solid #000";
box.style.background="#48D1CC";
box.innerHTML = nowmonth;
}
function dot1(){
box.style.width="100px";
box.style.height="100px";
box.style.borderRadius="50px";
box.style.lineHeight="100px";
box.style.border="2px dotted #000";
box.style.background="#DEB887";
box.innerHTML = nowday.getDate()+"号";
}
function shad1(){
box.style.width="100px";
box.style.height="100px";
box.style.borderRadius="50px";
box.style.lineHeight="100px";
box.style.boxShadow="3px 3px 2px #777";
box.style.background="#6B8E32";
box.innerHTML = nowday.getHours()+"时";
}
function hide1(){
box.style.display="none";
}
function show1(){
box.style.display="block";
}
function read1(){
box.style.width="50px";
box.style.height="50px";
box.style.borderRadius="0px";
box.style.border="none";
box.style.boxShadow="none";
box.style.background="red";
box.innerHTML = "";
}
</script>
<div id="box"></div>
<input type="button" value="变宽" onclick="width1()" />
<input type="button" value="变圆" onclick="cir1()" />
<input type="button" value="加边框" onclick="bor1()" />
<input type="button" value="虚线框" onclick="dot1()" />
<input type="button" value="加阴影" onclick="shad1()" />
<input type="button" value="隐藏" onclick="hide1()" />
<input type="button" value="显示" onclick="show1()" />
<input type="button" value="重置" onclick="read1()" />
</body>
</html>