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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 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
Smarty Foreach 使用说明
2010/03/23 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
起点页面传值js,有空研究学习下
2010/01/25 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
详解python的webrtc库实现语音端点检测
2017/05/31 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python实现批量转换图片为黑白
2020/06/16 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
财务会计专业应届毕业生求职信
2013/10/18 职场文书
普通大学毕业生自荐信
2013/11/04 职场文书
创先争优承诺书范文
2014/03/31 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
国庆横幅标语
2014/10/08 职场文书
员工工作及收入证明
2014/10/28 职场文书