今天分享一个在 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. Web常用编码以及攻击绕过笔记

    一.URL编码形式:"%"加上ASCII码(先将字符转换为两位ASCII码,再转为16进制),其中加号"+"在URL编码中和"%20"表示一 ...

  2. 浅析 TensorFlow Runtime 技术

    关于 TF Runtime 的疑问? 什么是TFRT ? TensorFlow Runtime,简称 TFRT,它提供了统一的.可扩展的基础架构层,可以极致地发挥CPU多线程性能,支持全异步编程(无锁 ...

  3. 用git上传项目到GitHub或者码云全过程

    用git上传项目到GitHub或者码云全过程 1. 会生成一个隐藏文件夹".git".这是一个不可删文件,因为暂存区和历史区还有一些其他的信息都在这里,删掉就不是一个完整的仓库了 ...

  4. VS编译程序添加图标

    如图 然后编译就就生成有图标的了.

  5. PLA-机器学习基石2

    转自:http://blog.csdn.net/u013455341/article/details/46747343 在<机器学习基石>这门课里面也进入了第一讲的内容,这次学习到的是Pe ...

  6. JS验证三种提示框

    1 <form> 2 <!-- 按钮选择点击 --> 3 <tr> 4 <td><input type="button" na ...

  7. 回顾maven项目的spring boot相关知识点

    2021新年快乐! 在参加完研究生考试后,感觉像是放下了一个大负担,但并不能就此以为什么都结束了.反而,当我今天去看了一下之前老师带领我们班级做的一个maven项目,感觉像是第一次看到这个,十分陌生. ...

  8. JavaCV FFmpeg采集麦克风PCM音频数据

    前阵子用一个JavaCV的FFmpeg库实现了YUV视频数据地采集,同样的采集PCM音频数据也可以采用JavaCV的FFmpeg库. 传送门:JavaCV FFmpeg采集摄像头YUV数据 首先引入 ...

  9. 探讨EFCore如何优雅的实现读写分离

    前言     我们都知道当单库系统遇到性能瓶颈时,读写分离是首要优化手段之一.因为绝大多数系统读的比例远高于写的比例,并且大量耗时的读操作容易引起锁表导致无发写入数据,这时读写分离就更加重要了.   ...

  10. hadoop目录结构

    Hadoop目录结构 重要目录结构: bin目录:存放对Hadoop相关服务(HDFS,YARN)进行操作的脚本 etc目录:Hadoop的配置文件目录,存放Hadoop的配置文件 lib目录:存放H ...