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的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
js前端导出Excel的方法
Nov 01 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
原生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 进度条实现代码
2009/03/10 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python正则表达式使用经典实例
2016/06/21 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
学习python的前途 python挣钱
2019/02/27 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
教师个人工作总结范文2014
2014/11/10 职场文书
行政答辩状范文
2015/05/21 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
详解Python中__new__方法的作用
2022/03/31 Python