摘要：<!DOCTYPE html><html><head> <meta charset=utf-8" /> <title>JS控制DIV</title> <style type="text/css"> #box{width:50px;height:50px;background:red;
<!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()+"號(hào)";
}
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()+"時(shí)";
}
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>
批改老師：天蓬老師批改時(shí)間：2018-12-01 23:35:44
老師總結(jié)：前端學(xué)習(xí),javascript編程,是永遠(yuǎn)的核心,也是程序員心中永遠(yuǎn)的痛,一定要重視