点击页面动态显示字段

1看代码有注释

自己引jquery,以下代码是在script标签里面

//这是你点击页面出现的字
var arr=[“a”,“b”,“c”,“d”];
//鼠标点击特效
//页面加载事件
jQuery(function () {

//声明变量
var hits = 0;

//给页面创建点击事件
$(“html”).click(function (e) {

//创建颜色库
//随机颜色
//创建颜色码
//前颜色码库
const frontCorlor = new Array(‘00’, ‘11’, ‘22’, ‘33’, ‘44’, ‘55’, ‘66’, ‘77’, ‘88’, ‘99’,
‘aa’, ‘bb’, ‘cc’, ‘dd’, ‘ee’, ‘ff’);
//中颜色码库
const centreCorlor = new Array(‘00’, ‘11’, ‘22’, ‘33’, ‘44’, ‘55’, ‘66’, ‘77’, ‘88’, ‘99’,
‘aa’, ‘bb’, ‘cc’, ‘dd’, ‘ee’, ‘ff’);
//后颜色码库
const queenCorlor = new Array(‘00’, ‘11’, ‘22’, ‘33’, ‘44’, ‘55’, ‘66’, ‘77’, ‘88’, ‘99’,
‘aa’, ‘bb’, ‘cc’, ‘dd’, ‘ee’, ‘ff’);

//从颜色库选取一种颜色;当然这是数组的方式;随机性
//前颜色码
var frontcode = Math.floor(Math.random() * frontCorlor.length);
//中颜色码
var centrecode = Math.floor(Math.random() * centreCorlor.length);
//后颜色码
var queencode = Math.floor(Math.random() * queenCorlor.length);

// console.log("frontcode = " + frontcode + “; centrecode = " + centrecode + “; queencode = " + queencode + “;”)
// console.log(”#” + frontCorlor[frontcode] + centreCorlor[centrecode] + queenCorlor[queencode]);

//每当鼠标点击页面增加点击数
//循环数,想循环的调一下这个数字可以当点击你写的字一遍了,继续点会再从第一个字开始

    hits++;
    if (hits==5){
        hits=1;
    }

//创建元素; 创建的元素是span元素,这个元素的内容是"鼠标点击了第" + hits(这个是一个变量) + “次”
var extablish = $("").text(arr[hits-1]);

//在页面上添加span元素
jQuery(“html”).append(extablish);

//获取鼠标点击坐标
//横坐标
var abscisse = e.pageX;
//纵坐标
var ordinate = e.pageY;

//给span元素添加css样式
extablish.css({
“z-index”: 999, //设置或获取定位对象的堆叠次序(z-index):999
“top”: ordinate - 20, //上(top):y-20
“left”: abscisse, //左:x
“position”: “absolute”, //定位:绝对定位
“font-weight”: “bold”, //字体粗细:粗体
“color”: “#” + frontCorlor[frontcode] + centreCorlor[centrecode] + queenCorlor[queencode], //颜色:绿色
“user-select”: “none”, //使文字不被选中
“font-size”: “100px”,
});

    extablish.animate({
            "top": ordinate - 180, //上:y-180
            "opacity": 0 //透明度(opacity):0
        }, 2000, //1500,调节动画速度
        function () { //功能函数
            extablish.remove(); //$i的删除
        }
    );
})

})