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>
    

      

    效果如下:

  • 相关阅读:
    jquery deferred对象
    一张图道尽Javascript的原型继承
    Reflection
    vim操作
    转载:HTTP调试工具:Fiddler的使用方法介绍
    转载:计算机网络面试题
    20120810
    new pad不能用usb充电的解决方法
    20120416
    Lua入门——环境安装
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14063428.html
Copyright © 2011-2022 走看看