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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
JavaScript中this详解
Sep 01 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
微信小程序实现自定义底部导航
Nov 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
java字符串格式化输出实例讲解
2021/01/06 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
分公司经理岗位职责
2013/11/11 职场文书
2014年高考决心书
2014/03/11 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
运动会通讯稿200字
2015/07/20 职场文书
学雷锋活动简报
2015/07/20 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android