收藏
批改状态：未批改
老师批语：
学习了JS的Math函数，利用它获取随机数字。 写小案例前，要充分了解JS如何选择元素和控制元素CSS样式和属性。 HTML DOM的setInterval clearInterval 方法使用。
<!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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
