今天分享一个在 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. 安装nodejs 版本控制器

    安装下载地址: https://pan.baidu.com/s/1Ed_IPDTOHxR9NShUEau-ZA 下载好后,放在安装nodejs的文件夹下 然后敲cmd,进入安装nodejs的文件夹下. ...

  2. Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  3. P4735 最大异或和 01 Trie

    题目描述 给定一个非负整数序列 \(\{a\}\),初始长度为\(n\). 有 \(m\) 个操作,有以下两种操作类型: \(A\ x\):添加操作,表示在序列末尾添加一个数 \(x\),序列的长度 ...

  4. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

  5. Redis不仅仅是缓存，还是……

    你需要一个经典数据库吗? 一段时间以来,巨大数量的数据处理迫使所有的应用程序在数据库层前添加缓存策略.即使经典数据库进行了大量的下划线优化,仍然不能提供足够的速度和可用性.主要原因在于数据存储越远,获 ...

  6. Fresco 二三事：图片处理之旋转、缩放、裁剪切割图片

    关于Fresco加载图片的处理,例如旋转.裁剪切割图片,在官方文档也都有提到,只是感觉写的不太详细,正好最近项目里有类似需求,所以分享一些使用小tip,后面的朋友就不用再走弯路浪费时间了.(测试图片分 ...

  7. Git 分支模型与开发规范

    GitHub Flow & Git Flow 基于Git 的两种协作开发模式 01.分支模型 master:长期分支,一般用于管理对外发布版本,每个 commit 对一个 tag,也就是一个发 ...

  8. 【原创】Linux PCI驱动框架分析（二）

    背 景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本 ...

  9. 腾讯云联合多家生态伙伴，重磅开源 SuperEdge 边缘容器项目

    在2020年12月19-20日腾讯 Techo Park 开发者大会上,腾讯云联合英特尔.VMware 威睿.虎牙.寒武纪.美团.首都在线,共同发布 SuperEdge 边缘容器开源项目. Super ...

  10. [Machine Learning] 逻辑回归 (Logistic Regression) -分类问题-逻辑回归-正则化

    在之前的问题讨论中,研究的都是连续值,即y的输出是一个连续的值.但是在分类问题中,要预测的值是离散的值,就是预测的结果是否属于某一个类.例如:判断一封电子邮件是否是垃圾邮件:判断一次金融交易是否是欺诈 ...