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 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
前端jquery部分很精彩
May 03 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JavaScript ES6箭头函数使用指南
Dec 30 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Django继承自带user表并重写的例子
2019/11/18 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
法律系毕业生求职信
2014/05/28 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
童年读书笔记
2015/06/26 职场文书
总经理年会致辞
2015/07/29 职场文书
办公室日常管理制度
2015/08/04 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript