实现步骤解析：
1.这原本是一个鼠标后面跟随一串英文字母的效果，
2.后来我就想，运用随机数字母的颜色做成彩色的，
3.并且每一个字母的色彩是随机分配而不是我自己手动填写的。
js：
1.var coor = “rgb(” + Math.floor(Math.random() * 256) + “,” + Math.floor(Math.random() * 256) + “,” + Math.floor(Math.random() * 256) + ")"生成随机颜色；
2.其代码核心是 Math.floor(Math.random()*255) 这句，他获取到的是0-255之间的任意一个值；
3. 然后把r,g,b三个值分别用这句代码代替，凑成一个整的颜色值字符串赋给变量，最后弹出就ok了。
4. onmousemove函数中，是当鼠标有移动的时候会发生的事情；
5.本来i的for循环是在这个函数的外边的，我为了让字母可以随时随地换随机颜色，就把他放进了鼠标事件里边，每当鼠标移动一次，就从新调用一个颜色值，这样就会在鼠标移动的时候变颜色了；
6.一开始只添加window.setInterval()函数，使拖尾的字母逐渐消失： * var setInterval = window.setInterval(function() { if (opacity <= 0) { window.clearInterval(setInterval); } else { opacity = (opacity - 0.1); newEle.style.opacity = opacity; } }, 100) 之后发现页面上会出现大量div在页面上，导致拖尾效果变慢，随后加入了：newEle.remove()； 用于每次透明的度消失后直接移除元素。
css：
1.为js创建的div设置样式css： position: absolute; js： newEle.style.left = (event.clientX + 10) + “px”; newEle.style.top = (event.clientY + 10) + “px”; 会根据鼠标的位置显示字符串。
2. -moz-user-select: none; -khtml-user-select: none; user-select: none; 将div设置鼠标不可选择（不设置该属性，会对点击事件造成影响）
我要评论<style type="text/css">
div
{
position: absolute;
width: 1em;
height: 1em;
display: block;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
</style>
<script type="text/javascript">
window.onmousemove = function(event) {
var arr = ForATOZChar();
//随机出1-16的数字
var randomNum = Math.floor(Math.random() * 0x10);
//随机出字体颜色
var coor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
//创建元素跟随鼠标
var newEle = document.createElement("div");
newEle.innerText = arr[randomNum];
document.body.appendChild(newEle)
newEle.style.left = (event.clientX + 10) + "px";
newEle.style.top = (event.clientY + 10) + "px";
newEle.style.color = coor;
var opacity = parseFloat(1);
var toppx = (event.clientY + 20);
// 设置一秒逐渐消失
var setInterval = window.setInterval(function() {
if (opacity <= 0) { window.clearInterval(setInterval); newEle.remove(); } else {
opacity = (opacity - 0.1);
newEle.style.opacity = opacity;
}
}, 100)
}
//循环输出A-O字母
function ForATOOChar() {
var charArr = [];
for (var i = 0; i < 17; i++) {
charArr[i] = String.fromCharCode((65 + i))
}
return charArr;
}
</script>
***第一次发布(有用记得点赞哦！！！)***
本文地址：https://blog.csdn.net/weixin_43941291/article/details/107363663
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论