摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 200px; height: 200px; backgrou
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<!-- <div id="div" onclick="ccc(this)">
</div> -->
<div id="box">
<!-- <input type="button" value="变宽" onclick="kuan()"> -->
</div>
<input type="button" value="变宽" onclick="kuan()">
<input type="button" value="变高" onclick="gao()">
<input type="button" value="重置" onclick="cz()">
<input type="button" value="变圆" onclick="yuan()">
<input type="button" value="随机变色" onclick="bs()">
<script>
// function person(){
// this.name='lisi';y
// this.age='25';
// this.sex='男';
// this.say=function (){
// return "hi,my name is"+this.name+"the year is"+this.age+"i am a"+this.sex+"nice to meet you";
// }
// }
// var ls=new person();
// alert(ls.say());
// var d=new Date();
// var week=["星期一","星期二","星期三","星期四","星期五","星期六","星期天"];
// document.write(week[0]);
// document.write("今天是"+week[d.getDay()]);
// var di=document.getElementById("div");
// di.style.cssText='width:600;height:600;background:pink';
// di.style.width="600px";
// di.style.height="600px";
// di.style.background="pink";
// function ccc(){
// var di=document.getElementById("div");
// di.style.cssText='width:300px;height:300px;background:pink';
// }
var bi;
window.onload=function(){
bi=document.getElementById("box");
}
function kuan(){
bi.style.width="600px" //第一种控制CSS写法
}
function gao(){
bi.style.cssText="height:600px"//第二种用cssText控制写法
}
function yuan(){
bi.style.borderRadius="300px"
//bi.style.cssText="border-radius:300px;"
}
function cz(){
bi.style.cssText="width:200px;height:200px;"
}
function bs(){
// function rgb(){
// var r=Math.floor(Math.random()*256);
// var g=Math.floor(Math.random()*256);
// var b=Math.floor(Math.random()*256);
// var rgb='('r','g','b')'
// return rgb;
// }
// var ArrayCl=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
// var n=0;
// if(n<(ArrayCl.length-1)&&n>=0){
// // document.background = ArrayCl[n];
// n=0;n++;
// }
function rcl(){
var r,g,b;
r=Math.floor(Math.random()*256);//Math.floor用来取整，Math.random--取0-1之间的随机数
g=Math.floor(Math.random()*256);
b=Math.floor(Math.random()*256);
return "rgb("+r+','+g+','+b+")"
}
bi.style.background = rcl();
}
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-05 09:07:55
老师总结：JavaScript的功能还是很强大的！轻轻松松的控制一些dom的样式，对dom的内容进行操作等！课后要多练习哦！
