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>
    

      

    效果如下:

  • 相关阅读:
    cb快捷键
    N的阶乘的长度 V2(斯特林近似)
    最大子序列和(Max Sum ,Super Jumping! Jumping! Jumping! )
    关于莫比乌斯和莫比乌斯反演
    最少拦截系统
    set用法详解
    几种数学公式(环排列 母函数 唯一分解定理 卡特兰数 默慈金数 贝尔数 那罗延数)
    最小堆算法
    并查集算法
    dijkstra算法演示
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14063428.html
Copyright © 2011-2022 走看看