今天分享一个在 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随机变换颜色的更多相关文章

  1. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  2. 当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式

    <style> #d1{ width:200px; height:200px; border:1px solid #000; transition:background 4s linear ...

  3. JS实现鼠标移入水波效果

    前言 最近比较沉迷JS,所以我现在来做个鼠标的交互效果 HTML <div style="border-radius;position:relative;width:800px;hei ...

  4. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  5. 关于js判断鼠标移入元素的方向——上下左右

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  6. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  7. 点击DIV随机换颜色

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  8. vue中鼠标移入字体下面显示颜色并改变字体颜色的问题

    <template> <div class="smart_nav" :class="{'fixedTop':fixedTop}"> &l ...

  9. js用斜率判断鼠标进入div的四个方向

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...

随机推荐

  1. SSH，公钥，私钥的理解

    参考大佬的文章:https://blog.csdn.net/li528405176/article/details/82810342    https://www.cnblogs.com/Bravew ...

  2. PHPCMS V9.6.3的后台漏洞分析

    PHPCMS V9.6.3后台的漏洞分析 1.利用文件包含创建任意文件getshell 漏洞文件:\phpcmsv9\phpcms\modules\block\block_admin.php 漏洞产生 ...

  3. 如何去掉ul和li前面的小黑点

    做网站的时候经常会遇到如上图所示的小圆点,难看不说,还容易影响布局,下面就介绍几种消除小圆点的方法: 1. 找到相关CSS文件,在.ul 和.li 部分添加: 1 list-style: none; ...

  4. [leetcode]Next Greater Element

    第一题:寻找子集合中每个元素在原集合中右边第一个比它大的数. 想到了用哈希表存这个数的位置,但是没有想到可以直接用哈希表存next great,用栈存还没找到的数,没遍历一个数就考察栈中的元素小,小的 ...

  5. [leetcode]380. Insert Delete GetRandom O(1)设计数据结构，实现存，删，随机取的时间复杂度为O(1)

    题目: Design a data structure that supports all following operations in average O(1) time.1.insert(val ...

  6. Layui关闭弹出层对话框--刷新父界面

    在毕设的开发中,添加用户.添加权限等等一些地方需要类似于bootstrap中的模态框.然而开发用的却是layui 在layui中有弹出层可以实现其中的效果. 但是,一般用的时候都是提交后关闭窗口,刷新 ...

  7. Vue知识点精简汇总

    一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) 2. 定义组件的 ...

  8. 深入理解linux-free命令原理(2）

    linux free 命令用法说明 概述: 这篇文章比较深入的从free为起点  折射出的一些概念:比如  buff/cache是怎么一回事[涉及内存页等话题]:  available这个参数与fre ...

  9. mysql源码分析-启动过程

    mysql源码分析-启动过程 概要 # sql/mysqld.cc, 不包含psi的初始化过程 mysqld_main: // 加载my.cnf和my.cnf.d,还有命令行参数 if (load_d ...

  10. 安装Android Studio遇到的问题

    1. 学习视频 视频链接:https://www.bilibili.com/video/BV1jW411375J?p=2 2. Android Studio1.5.1的下载地址: http://www ...