<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 这是在网页中显示可以变化的时间代码，
使用了BOM对象中的定时器函数setInterval()，
每隔1秒调用一次指定函数刷新时间，第二个参数单位是毫秒 -->
<p id="time"></p>
<script>
function curtime(){
var oP=document.getElementById("time");
var ctime=new Date();
var h=ctime.getHours();
var m=ctime.getMinutes();
var s=ctime.getSeconds();
oP.innerHTML=h+":"+m+":"+s;
}
curtime();
window.setInterval(curtime,1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 300px;
background-color: gray;
/* 外边框上下50px 左右居中 */
margin: 50px auto;
padding: 15px;
}
#box p:last-child {
text-align: right;
cursor: pointer;
}
#color input {
width: 40px;
}
</style>
<script>
//onload让html先执行，再来执行js,不然会先执行js，
window.onload = function() {
//不加onload这条语句会先执行，在执行html,此时检测不到无作用
var obtn = document.getElementById("btn");
obtn.onclick = function() {
//将html与js分开，方便维护
//function changebj() {
var odiv = document.getElementById("box");
//var ocolor=document.getElementById("color");
//同类元素通过标签名取变量
//var oinput = ocolor.getElementsByTagName("input");
//不同类元素用类名去取
//var oinput = ocolor.getElementsByClassName("oc");
//alert(oinput.length);
var oinput = document.querySelectorAll("#color input");
//alert(oinput.length);
var r = oinput[0].value;
var g = oinput[1].value;
var b = oinput[2].value;
//看看有几个input 点一下换背景就会给提示alert(oinput.length);
// var r = parseInt(Math.random() * 256);
// var g = parseInt(Math.random() * 256);
// var b = parseInt(Math.random() * 256);
odiv.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
var opara2 = document.getElementById("para2");
opara2.onclick = function() {
//function fun() {
var op1 = document.getElementById("para1");
var op2 = document.getElementById("para2");
if (op2.innerHTML == "收缩") {
op1.innerHTML = "那非法哈佛哈佛法啊发啊额发色...";
op2.innerHTML = "展开";
} else {
op1.innerHTML =
"那非法哈佛哈佛法啊发啊额发色鬼虽然给是如果是给是人给虽然给认识给虽然给虽然给虽然给人参果虽然给虽然给认识给虽然给虽然给虽然给虽然过生日给虽然给色弱饿啊日四个人参果如果认识更是给是给二十个的";
op2.innerHTML = "收缩";
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="color">
红色：<input type="text" class="oc">
绿色：<input type="text" class="oc">
蓝色：<input type="text" class="oc">
</div>
<!-- <input type="button" value="背景色" onclick="changebj()"> -->
<input type="button" value="背景色" id="btn">
<p id="para1">那非法哈佛哈佛法啊发啊额发色鬼虽然给是如果是给是人给虽然给认识给虽然给虽然给虽然给人参果虽然给虽然给认识给虽然给虽然给虽然给虽然过生日给虽然给色弱饿啊日四个人参果如果认识更是给是给二十个的
</p>
<!-- <p id="para2" onclick="fun()">收缩</p> -->
<p id="para2">收缩</p>
</div>
</body>
</html>
