脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS鼠标移入随机变换颜色

JavaScript实现鼠标移入随机变换颜色

 更新时间：2020年11月24日 09:42:27   作者：学不明白！  
这篇文章主要给大家介绍了关于JavaScript实现鼠标移入随机变换颜色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

大家好！

今天分享一个在 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实现鼠标移入随机变换颜色的文章就介绍到这了,更多相关JS鼠标移入随机变换颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Moment.js常见用法总结

    Moment.js常见用法总结

    这篇文章主要介绍了Moment.js常见用法总结,需要的朋友可以参考下
    2022-05-05
  • layer ui插件显示tips时,修改字体颜色的实现方法

    layer ui插件显示tips时,修改字体颜色的实现方法

    今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 一些实用性较高的js方法

    一些实用性较高的js方法

    这篇文章主要为大家分享了一些实用性较高的js方法，方便大家开发时使用，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • javascript代码简写的几种常用方式汇总

    javascript代码简写的几种常用方式汇总

    任何一种编程语言的简写小技巧都是为了帮助你写出更简洁、更完善的代码,让你用更少的编码实现你的需求,这篇文章主要给大家介绍了关于javascript代码简写的几种常用方式,需要的朋友可以参考下
    2021-08-08
  • Javascript中3种实现继承的方法和代码实例

    Javascript中3种实现继承的方法和代码实例

    这篇文章主要介绍了Javascript中3种实现继承的方法和代码实例,这3种方法分别为对象冒充、原型继承、上二者的混合,需要的朋友可以参考下
    2014-08-08
  • JS+Ajax实现百度智能搜索框

    JS+Ajax实现百度智能搜索框

    现在遇到这样的需求，要求输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。下面小编给大家分享同js和ajax实现百度智能搜索框，需要的的朋友参考下实现代码
    2017-08-08
  • JavaScript实现图片本地预览功能【不用上传至服务器】

    JavaScript实现图片本地预览功能【不用上传至服务器】

    这篇文章主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
    2017-09-09
  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    很多南方的小伙伴可能没怎么见过或者从来没见过下雪，这篇文章小编给大家带来一个小Demo，模拟了下雪场景。感兴趣的小伙伴快来跟随小编一起学习一下吧
    2021-12-12
  • js省市联动效果完整实例代码

    js省市联动效果完整实例代码

    这篇文章主要介绍了js省市联动效果完整实例代码,涉及JavaScript数组的定义与遍历技巧,代码非常具有实用价值,需要的朋友可以参考下
    2015-12-12
  • 微信小程序开发之左右分栏效果的实例代码

    微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子，简述在微信小程序开发中左右分栏功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，感兴趣的朋友跟随小编一起看看吧
    2019-05-05

最新评论