随机获取颜色背景

Original 2019-04-20 13:20:10 245
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机</title> <style type="text/css" media="screen"
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>随机</title>
	<style type="text/css" media="screen">
	.box {}
	.boxinput {width: 500px;height: 400px;margin: 0px auto;background: #ccc;line-height: 30px;}
	}
	.boxinput input {margin-left:10px;background: lin}
	.boxP {color:#222;width: 400px;margin: 0px auto;}
	</style>
</head>
<body>
<div class="box">
	<div class="boxinput">
		<input type="checkbox" name=""><span>one</span><br>
		<input type="checkbox" name=""><span>two</span><br>
		<input type="checkbox" name=""><span>three</span><br>
		<input type="checkbox" name=""><span>four</span><br>
		<button type="button" onclick="checkaall()">全选</button>
		<button type="button" onclick="bgc()">换背景色</button>
		<button type="button" onclick="clearInterval(t) ">停止倒计时</button>  
		<!-- clearInterval 函数是清除倒计时 -->
	</div>

	<div class="boxP">
		10 秒后跳转 到 我爱linux网www.52linux.cn
	</div>
</div>
<script type="text/javascript">

	//全选
	function checkaall() {
		var boxinput = document.getElementsByClassName('boxinput')[0].getElementsByTagName('input')

	  for (var i=0;i<boxinput.length;i++) {
		 if (boxinput[i].checked){   //如果选中就取消
		 		boxinput[i].checked=false
		 		}else{   //如果没有选中就勾选
		 			boxinput[i].checked=true
		 		}
		 	}
	}

	//换背景
	function bgc() {
			var r = Math.round(Math.random()*(255-0))+0
			var g = Math.round(Math.random()*(255-0))+0
			var b = Math.round(Math.random()*(255-0))+0
			var ap =  Math.random()
			var apstr = ap.toString()  //转字符串
			var apstr =apstr.slice(0,3) //字符串截取
			var f = Math.round(Math.random()*(30-12))+12
			console.log()
			var rgb1 = "rgba(" + r + "," + g + "," + b + ","+apstr+")"
			console.log(rgb1)
			document.getElementsByClassName('boxinput')[0].style.background=rgb1 

			// boxinput[0]//"rgb("+r","+g+","+b+")"
	}

	//倒计时
	 function jishi(){

	
	 var boxP = document.getElementsByClassName('boxP')[0]
	 var num = parseInt(boxP.innerHTML)
	 console.log(num)
	   if (num<1){
	   		window.location.href="http://www.linuxup.cn"
	   } else {
	   	boxP.innerHTML=num-1+"秒后跳转 到 我爱linux网www.52linux.cn"
	   }

}
	
 var t =setInterval("jishi()", 1000)


</script>
</body>
</html>


Correcting teacher:天蓬老师Correction time:2019-04-20 13:39:41
Teacher's summary:JavaScript允许省略语句后台的分号, 这个风格曾经有一段时间非常的流行, 不过, JS的开发者已经站出来澄清了, 强烈不建议省略掉语句后的分号, 以防止压缩代码时出错, 所以, 以后, 还是要添加分号的

Release Notes

Popular Entries