今天分享一个在 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. 在Linux中要修改一个文件夹或文件的权限

    在Linux中要修改一个文件夹或文件的权限我们需要用到linux chmod命令来做,下面我写了几个简单的实例大家可参考一下. 语法如下: chmod [who] [+ | - | =] [mode] ...

  2. 4. 上新了Spring，全新一代类型转换机制

    目录 ✍前言 版本约定 ✍正文 PropertyEditor设计缺陷 新一代类型转换 Converter 代码示例 不足 ConverterFactory 代码示例 不足 GenericConvert ...

  3. winform使用Barcodex控件预览和打印一维码

    1.控件下载. http://files.cnblogs.com/files/masonblog/barcodex.zip . 包含barcodex.ocx控件.barcodex帮助文档.两个winf ...

  4. 输入xls格式 输出 xls

    package com.cn.peitest.excel.word; import java.io.File; import java.io.FileInputStream; import java. ...

  5. Oracle数据库常见sql

    -新建表:create table table_name( id varchar2(300) primary key, name varchar2(200) not null); --插入数据 ins ...

  6. 多维数组遍历.php

    $a=array('fruits'=>array('a'=>'orange','b'=>'grape','c'=>'apple'),     'numbers'=>arr ...

  7. Deep Neural Networks for YouTube Recommendations YouTube的经典推荐框架

    https://zhuanlan.zhihu.com/p/52169807 王喆大佬的讲解

  8. 在 Emit 代码中如何await一个异步方法

    0. 前言 首先立马解释一波为啥会有这样一篇伪标题的Demo随笔呢? 不是本人有知识误区,或者要误人子弟 因为大家都知道emit写出来的都是同步方法,不可能await,至少现在这么多年来没有提供对应的 ...

  9. 第十一章节 BJROBOT PS3 手柄控制【ROS全开源阿克曼转向智能网联无人驾驶车】

    1.把小车架空平放在地板上.   2.用 USB 线将 PS3 蓝牙手柄连接至小车主控端,初次连接手柄上的 4 个红色指示灯会同时闪烁; 3.按下手柄中间的圆形配对键,然后等待红灯闪烁至停止. 4.此 ...

  10. openbmc编译错误汇总，持续更新，建议收藏

    本文汇总自己在编译openbmc时遇到的一些问题及解决思路,希望对有兴趣研究openbmc的同学有一些帮助. 项目地址:https://github.com/openbmc/openbmc 编译步骤: ...