JavaScript实现鼠标移入随机变换颜色


Posted in Javascript onNovember 24, 2020

大家好!

今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色。

<!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>

如下是代码运行后在这里插入图片描述

JavaScript实现鼠标移入随机变换颜色

总结

到此这篇关于JavaScript实现鼠标移入随机变换颜色的文章就介绍到这了,更多相关JS鼠标移入随机变换颜色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
js 小贴士一星期合集
Apr 07 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
原生js实现表格循环滚动
Nov 24 #Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Js利用正则表达式去除字符串的中括号
Nov 23 #Javascript
jQuery实现动态操作table行
Nov 23 #jQuery
JavaScript前后端JSON使用方法教程
Nov 23 #Javascript
微信小程序实现简单的select下拉框
Nov 23 #Javascript
You might like
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
原生js轮播特效
2017/05/18 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
django 2.0更新的10条注意事项总结
2018/01/05 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
小学教师师德师风个人整改措施
2014/09/18 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
mysql配置SSL证书登录的实现
2021/09/04 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript