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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
Vue组件中slot的用法
Jan 30 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
vue-cli3 热更新配置操作
Sep 18 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创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
详解Python下ftp上传文件linux服务器
2018/06/21 Python
浅析Python四种数据类型
2018/09/26 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详解【python】str与json类型转换
2019/04/29 Python
Python微信操控itchat的方法
2019/05/31 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
中专生的个人自我评价
2013/12/11 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
产品质量承诺范本
2014/03/31 职场文书
作文批改评语大全
2014/04/23 职场文书
售票员岗位职责
2015/02/15 职场文书
护士2015年终工作总结
2015/04/29 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
anaconda python3.8安装后降级
2021/06/11 Python