JavaScript实现鼠标移入随机变换颜色
作者:像素漫游时间:2026-10-24 06:17:13浏览:285
本文介绍如何使用JavaScript实现鼠标移入元素时随机变换颜色的效果。通过遍历DOM节点并绑定事件,利用Math.random生成十六进制颜色值,为每个块元素赋予随机背景色,适用于前端交互演示。
大家好!
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 鼠标移入随机变换颜色内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
