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>
    

      

    效果如下:

  • 相关阅读:
    面向对象设计大作业第二阶段:图书馆系统
    OO之接口-DAO模式代码阅读及应用
    OO设计-有理数类的设计
    DS博客作业05--查找
    DS博客作业04--图
    DS博客作业03--树
    DS博客作业02--栈和队列
    DS01——线性表
    c博客06-结构体&文件
    C语言博客作业05——指针
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14063428.html
Copyright © 2011-2022 走看看