上面是效果图，不是原创。
下面是代码。。。
这是css样式
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 550px;
height: 350px;
position: relative;
background-size: 100% 100%;
}
.txt {
border: 3px solid #fafafa;
border-radius: 50%;
width: 26px;
height: 26px;
position: absolute;
text-align: center;
line-height: 26px;
color: white;
background-color: rgba(0, 60, 255, 0.719);
}
.divTxt {
width: 50px;
height: 50px;
text-shadow: 0 0 10px white;
position: absolute;
text-align: center;
line-height: 50px;
font-size: 30px;
}
.Tip {
position: absolute;
width: 550px;
height: 35px;
text-align: center;
font-size: 18px;
line-height: 35px;
}
</style>
body的内容
<body>
<div class="txt">1</div>
<div id="box"></div>
<div class="Tip"></div>
<script type="text/javascript">
let box = document.getElementById('box')
let arrs = ['儒雅随和', '口吐芬芳', '气定神闲', '钢筋直男', '难上加难', '超级加倍', '粗鄙之语', '强人锁男', '我全都要']
let bgs = [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftu1.whhost.net%2Fuploads%2F20181112%2F12%2F1541998173-eyDXmzWhxN.jpg&refer=http%3A%2F%2Ftu1.whhost.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667528521&t=1405ed65a8de5177b51a9c2dea8a23f3",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww5252b.con_www.7me.cn%2FUploads%2FImages%2F20160125%2F960X600%2F56a5f9542f6184268.jpg&refer=http%3A%2F%2Fwww5252b.con_www.7me.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667528521&t=f28c59ddaa456282e27c5f2accce87d4",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F6%2Fd9%2F45741333816.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667528521&t=6c9afb7ab239a548bdde19ccbba1f09e",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg6%2FM00%2F08%2F0E%2FChMkKV8qHTeIB3qfAA2E9csmhdgAAAjaAJPNFIADYUN780.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667528521&t=2dea6a57546d441a29250e81cf34f190",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F0E%2F03%2FChMlWl5wNRCIMX1KAAUq7SZUEoAAANuLAOJe84ABSsF811.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667528521&t=340b36bd87e298fd45058883269f6ea1"
]
let x = 0, y = 0;
let index = Math.floor(Math.random() * arrs.length)
let arrtxt = ''
for (let i in arrs[index]) {
arrtxt += arrs[index][i]
let divTxt = document.createElement('div')
divTxt.innerText = arrs[index][i]
divTxt.classList.add('divTxt')
divTxt.style.left = Math.floor(Math.random() * 500) + 'px'
divTxt.style.top = Math.floor(Math.random() * 300) + 'px'
divTxt.style.transform = 'rotate(' + (Math.floor(Math.random() * 80 - 40)) + 'deg)'
box.appendChild(divTxt)
}
box.style.backgroundImage = 'url(' + bgs[Math.floor(Math.random() * bgs.length)] + ")"
let tip = document.querySelector('.Tip')
tip.innerHTML = '请按照当前成语依次点击文字--<b>' + arrtxt + "</b>"
let i = 0, newstr = '', tempElement = [];
box.addEventListener('click', (e) => {
i++
let addDiv = document.createElement('div')
addDiv.classList.add('txt')
addDiv.innerText = i
addDiv.setAttribute('style', 'left: ' + (e.clientX - 16) + 'px; top:' + (e.clientY - 16) + 'px;')
box.appendChild(addDiv)
tempElement.push(addDiv);
if (e.target.innerText.length = 1) {
newstr += e.target.innerText
}
if (arrtxt == newstr) {
alert('验证成功')
}
else if (tempElement.length === 4) {
alert('验证失败')
location.reload()
}
})
</script>
</body>
1034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
