【前端笔记】实现页面点击不同位置弹出文字
废话不多说，直接上效果图
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面点击弹出文字</title>
<style>
body{
/* background-color: rgb(35,35,35);*/
}
span{
/* 让弹出来的文字不被选中，影响操作体验 */
user-select: none;
cursor: default;
font-size: 20px;
/*color: blanchedalmond;*/
position: absolute;
transition: 1s;
}
</style>
</head>
<body>
<script>
// 设置随机出现的文字数组
var arr = ["在这披霜戴雪的冬日，一头扎进这沸腾的生命","命运如同手中的掌纹，无论多么曲折，始终掌握在你的手里","少言自寡，胜过千言万语","千万不要在奋斗的年纪选择安逸","除了你自己，没人会时刻在意你","命运的每一个玩去，都是你走向成功的一个转折","年少的期待，都会在日后被一一兑现，哪怕它们换了形态，且姗姗来迟","当你不能拥有的时候，唯一能做的便是不能忘记","如果命运是条孤独的河流，那么你就是你的灵魂摆渡人","燃烧，使你获得最终的宁静","生命的价值，在于始终坚持一个目标","没办法，我喜欢她，我对得起自己的喜欢","不求苍天俯就我的美意，但求永远恣意挥洒","每个人心底都有一座坟墓，是用来埋葬所爱的人","黑夜无论多么漫长，白昼总会到来","无论谁，领先一步，都是暂时的","这是黄昏的太阳，我却当做是黎明的曙光","人生处处有诱惑，贪欲者自上钩","认知自己的无知是最大的智慧","一路曲折，换来的是生命的成长","既然已经伤害了过去，就不要再辜负将来","人类最大的勇气就是豁出去的心","人成熟的标志在于，该动脑时，不在动情","对美好的追求，对残缺的接纳","青春时光转瞬即逝","生活不是一种刁难，而是一种雕刻","永远不要在别人面前调侃你的理想，你为他付出的是生命","凡是都有偶然的凑巧，结果却如宿命般的必然","总之岁月漫长，所有值得等待"]
document.onclick = function(x){
// 创建元素节点对象
var span = document.createElement("span")
// 获取当前鼠标的坐标
span.style.left = x.clientX + "px"
span.style.top = x.clientY + "px"
// 让span的值为arr数组内随机的一个值
span.innerHTML = arr[Math.floor(Math.random()*arr.length)]
// 设置span的动画效果
setTimeout(function(){
span.style.opacity = "1"
span.style.transform = "translateY(-100px)"
},100)
setTimeout(function(){
span.style.opacity = "0"
span.style.transform = "translateY(-230px)"
},1500)
// 清掉opacort为0的span
var chi = document.getElementsByClassName("span")
for(var i = 0;i<chi.length;i++){
if(chi[i].style.opacity === "0"){
document.body.removeChild(chi[i])
}
}
// 将span添加到body里
document.body.appendChild(span)
}
</script>
</body>
</html>
转载请注明——本文源自【玄北博客】www.xuanbeiweb.cn
免责声明：本站部分文章、数据、图片来自互联网，
如果侵犯了你的权益请来信告知我们删除，否则不承担相应法律责任。邮箱：xuanbei@xuanbeiweb.cn
