JS实现鼠标移入DIV随机变换颜色
今天分享一个在 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随机变换颜色的更多相关文章
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- 当鼠标移入div上时,div的背景色在4s之内渐变为灰色,同时在5s之内顺时针旋转45度,且尺寸缩小一半;当鼠标移走时,再渐变恢复初始样式
<style> #d1{ width:200px; height:200px; border:1px solid #000; transition:background 4s linear ...
- JS实现鼠标移入水波效果
前言 最近比较沉迷JS,所以我现在来做个鼠标的交互效果 HTML <div style="border-radius;position:relative;width:800px;hei ...
- 关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- 关于js判断鼠标移入元素的方向——上下左右
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- 点击DIV随机换颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- vue中鼠标移入字体下面显示颜色并改变字体颜色的问题
<template> <div class="smart_nav" :class="{'fixedTop':fixedTop}"> &l ...
- js用斜率判断鼠标进入div的四个方向
网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...
随机推荐
- 自动测试LeetCode用例方法
自动合并测试LeetCode解题方法 在leetcode.com上答题,Run Code或者Sumbmit通常要Spending一会,如果提交一次就Accepted那还好,如果反复Wrong Answ ...
- Core3.0返回的Json数据大小写格式问题
前言 测试发现,CoreWebAPI返回的Json数据,会将字段的首字母转换为小写, 经百度得,返回数据会默认驼峰命名,导致的. 随即百度, https://www.cnblogs.com/cdone ...
- 最全的Visual Studio Code配置及使用教程
史上最全vscode配置使用教程 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm ...
- [LeetCode]652. Find Duplicate Subtrees找到重复树
核心思想是:序列化树 序列化后,用String可以唯一的代表一棵树,其实就是前序遍历改造一下(空节点用符号表示): 一边序列化,一边用哈希表记录有没有重复的,如果有就添加,注意不能重复添加. 重点就是 ...
- 定期删除文件夹中的文件——C#
下面是自定义的一个函数,参数分别为:文件夹名称.文件后缀.保存天数 逻辑是获取当前系统的时间,和文件创建时间去作差,如果结果大于保存天数,就删除它 /// <summary> /// 定期 ...
- livy提交spark应用
spark-submit的使用shell时时灵活性较低,livy作为spark提交的一种工具,是使用接口或者java客户端的方式提交,可以集成到web应用中 1.客户端提交的方式 http://l ...
- react项目中实现搜索关键字呈现高亮状态(一)
最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...
- python+sklearn+kaggle机器学习
python+sklearn+kaggle机器学习 系列教程 0.kaggle 1. 初级线性回归模型机器学习过程 a. 提取数据 b.数据预处理 c.训练模型 d.根据数据预测 e.验证 今天是10 ...
- 2021升级版微服务教程4—Nacos 服务注册和发现
2021升级版SpringCloud教程从入门到实战精通「H版&alibaba&链路追踪&日志&事务&锁」 默认文件1610014380163 教程全目录「含视 ...
- CentOS7上安装jdk,mysql
最近笔者的云服务器由于中毒,重装系统了... 所以就记录下所有服务的搭建过程吧 1.安装jdk 在oracle上下载linux系统的jdk,笔者这里使用的是1.8 https://www.oracle ...