欢迎光临
我的个人博客网站

JS实现鼠标移入DIV随机变换颜色

今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用。

代码如下:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title></title> 		<style> 			/* 这里定义一下div(块元素)已下span 标签的宽.高.边框线以及边框线的颜色*/ 			span{ 				display: block; 				width: 80px; 				height: 80px; 				border: 1px solid #000000; 				float: left; 			} 		</style> 	</head> 	<body> 		<div> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 			<span></span><span></span><span></span><span></span><span></span><span></span> 		</div> 		<script type="text/javascript"> 			var a=document.getElementsByTagName("span"); 			/* 获取一下span标签 */ 				for(var i=0;i<=a.length;i++){ 					a[i].onmouseover=function(){ 						/* 循环出每一个方块,加入鼠标移入 */ 						this.style.backgroundColor="#"+Math.floor(Math.random()*16777215).toString(16); 						/* 颜色随机颜色 */ 					} 				} 		</script> 	</body> </html> 

  

效果如下:

JS实现鼠标移入DIV随机变换颜色

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » JS实现鼠标移入DIV随机变换颜色
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏