实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 500px;
margin: 100px auto;
}
span{
display: inline-block;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
color: pink;
}
a{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<button onclick="bg_Color()">点击切换背景色</button>
<div>
<span>8</span>秒后跳转至<a href="https://www.baidu.com">百度</a>
</div>
<script>
/*【案例2】随机色
【案例3】倒计时
*/
/*Math.random()产生[0,1)不包含1的数*/
var num=Math.random();
console.log(num);
function bg_Color(){
var str='#';
var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
str+=r+g+b;
console.log(str);
document.getElementsByTagName('body')[0].style.backgroundColor=str;
}
/*【案例3】倒计时*/
var i=8;
function CountDown(){
var Sp=document.getElementsByTagName('span')[0];
if(i>1){
i--;
Sp.innerHTML=i;
console.log(i);
}else{
window.location.href='https://www.baidu.com';
}
}
setInterval('CountDown()',1000);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例