鼠标点击网页出现文字特效(随机颜色)
我发现一个问题，原来变量名也可以使用中文。
同样声明函数也可以使用中文，只不过这样子不规范
这些代码仅仅作为参考，我也是在网上面参考过来的，只不过对原有的特效不满意，然后就加一些东西
这个特效实现起来很简单
直接复制这些代码，保存html文件就可以了，当然也导入jq插件，打开你保存的文件点击网页就可以看到特效了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标点击网页出现文字特效</title>
</head>
<body>
<!-- 首先导入jq插件 -->
<script src="js/jquery-3.1.0.js"></script>
<script>
//鼠标点击特效
//页面加载事件
jQuery(function () {
//声明变量
var 点击数 = 0;
//给页面创建点击事件
$("html").click(function (e) {
//创建颜色库
//随机颜色
//创建颜色码
const 前颜色码库 = new Array(00, 11, 22, 33, 44, 55, 66, 77, 88, 99,
aa, bb, cc, dd, ee, ff);
const 中颜色码库 = new Array(00, 11, 22, 33, 44, 55, 66, 77, 88, 99,
aa, bb, cc, dd, ee, ff);
const 后颜色码库 = new Array(00, 11, 22, 33, 44, 55, 66, 77, 88, 99,
aa, bb, cc, dd, ee, ff);
//从颜色库选取一种颜色;当然这是数组的方式;随机性
var 前颜色码 = Math.floor(Math.random() * 前颜色码库.length);
var 中颜色码 = Math.floor(Math.random() * 中颜色码库.length);
var 后颜色码 = Math.floor(Math.random() * 后颜色码库.length);
// console.log("前颜色码 = " + 前颜色码 + "; 中颜色码 = " + 中颜色码 + "; 后颜色码 = " + 后颜色码 + ";")
// console.log("#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码]);
//每当鼠标点击页面增加点击数
点击数++;
//创建元素; 创建的元素是span元素,这个元素的内容是"鼠标点击了第" + 点击数(这个是一个变量) + "次"
var 创建元素 = $("<span>").text("鼠标点击了第" + 点击数 + "次");
//在页面上添加span元素
jQuery("html").append(创建元素);
//获取鼠标点击坐标
var 横坐标 = e.pageX;
var 纵坐标 = e.pageY;
//给span元素添加css样式
创建元素.css({
"z-index": 999, //设置或获取定位对象的堆叠次序(z-index):999
"top": 纵坐标 - 20, //上(top):y-20
"left": 横坐标, //左:x
"position": "absolute", //定位:绝对定位
"font-weight": "bold", //字体粗细:粗体
"color": "#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码], //颜色:绿色
"user-select": "none", //使文字不被选中
});
//
创建元素.animate({
"top": 纵坐标 - 180, //上:y-180
"opacity": 0 //透明度(opacity):0
}, 2000, //1500,调节动画速度
function () { //功能函数
创建元素.remove(); //$i的删除
}
);
})
})
</script>
</body>
</html>
我也是非常懒，刚刚就是说到了，在代码中使用中文非常的不规范，希望各位不要像我一样，本来还想改的，但是算了
前段时间，我还被老师说了一下
hhh。。。