页面自动刷新获取随机颜色

原创 2019-01-04 17:06:31 316
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- 页面每5秒自动刷新 --><meta http-equiv="refresh" content="5"><title>获取随机颜色变化</ti

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- 页面每5秒自动刷新 -->

<meta http-equiv="refresh" content="5">

<title>获取随机颜色变化</title>

<link rel="stylesheet" type="text/css" href="">

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<style type="text/css">

.box{border: 10px solid pink;border-radius: 15px;margin:20 auto;overflow: hidden;}

a{display: block; float: left;margin:50px;width: 160px;height: 160px;line-height: 160px;text-align: center;color: #fff;border-radius: 100px;text-decoration: none;border: 1px solid red;}

</style>

<script type="text/javascript">

//颜色的变化

function color_x(tag){

var obj=document.getElementsByTagName(tag);

for (var i = 0; i < obj.length; i++) {

obj[i].style.background='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';

}


}

$(document).ready(function(){

//调用颜色变化函数

color_x('a');


//鼠标移动上面变化

$('a').mouseover(function(){

$(this).css({

width:'200px',

height:'200px',

lineHeight:"200px",

fontWeight:'bold'

});

})

//离开

$('a').mouseleave(function(){

$(this).css({

width:'160px',

height:'160px',

lineHeight:"160px",

fontWeight:'200'

});

})


})


</script>

</head>

<body>

<div>

<a href="#">NO1</a>

<a href="#">NO2</a>

<a href="#">NO3</a>

<a href="#">NO4</a>

</div>

</body>

</html>

老师我一开始用定时器,达不到想要的效果,用定时器的话该怎么使用

批改老师:天蓬老师批改时间:2019-01-04 17:58:46
老师总结:Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256, 这个作业就是考察你对原生内置的Math对象的理解, 还有很多方法, 请查看手册

发布手记

热门词条