zoukankan      html  css  js  c++  java
  • JS实现鼠标移入DIV随机变换颜色

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

    代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			/* 这里定义一下div(块元素)已下span 标签的宽.高.边框线以及边框线的颜色*/
    			span{
    				display: block;
    				 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>
    

      

    效果如下:

  • 相关阅读:
    类操作工具类
    让你的Git水平更上一层楼的10个小贴士
    android camera(四):camera 驱动 GT2005
    android camera(三):camera V4L2 FIMC
    android camera(二):摄像头工作原理、s5PV310 摄像头接口(CAMIF)
    android camera(一):camera模组CMM介绍
    MTK Android Driver知识大全
    makefile 进阶
    RGB Bayer Color分析
    8.3 MPI
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14063428.html
Copyright © 2011-2022 走看看