这两字哪有不同？？？？9. 不错啊 我看眼花了
标题: 抖音汉字找不同，新手
时间: 2021-11-28发布，2021-12-04修改
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>抖音汉字找不同</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.ab {
cursor: pointer;
float: left;
}
.xuanzhun {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(359deg)
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0deg)
}
to {
-o-transform: rotate(359deg)
}
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(359deg)
}
}
.kk {
position: fixed;
}
.kk button {
display: block;
width: 100px;
margin-top: 10px;
}
#app {
top: 50%;
left: 50%;
width: 610px;
height: 610px;
margin: auto;
background-color: #e5eecc;
position: fixed;
margin-top: -305px;
margin-left: -305px;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
}
.tip {
width: 500px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
font-size: 18px;
}
.left {
position: absolute;
top: 0;
left: -30px;
font-size: 16px;
}
.right {
position: absolute;
left: 0;
bottom: -30px;
font-size: 16px;
}
.left li {
list-style: none;
display: block;
height: 60px;
line-height: 60px;
border-bottom: 1px #fff solid;
font-size: 16px;
}
.right li {
text-align: center;
list-style: none;
display: inline-block;
width: 60px;
border-right: 1px #fff solid;
font-size: 16px;
}
</style>
</head>
<body>
<div class="kk">
<button onclick="diyi()">新游戏</button>
<button onclick="save()">保存记录</button>
<button onclick="rest()">刷新关卡</button>
<button onclick="sizej()">字体 +</button>
<button onclick="sizej2()">字体 -</button>
<button onclick="sizej3()">字体默认</button>
<button onclick="xuanz()">停止旋转</button>
<button onclick="xuanz2()">开启旋转</button>
</div>
<div style="text-align: center;line-height: 50px;font-size: 20px">第 <b id="guan">0</b> 关</div>
<div id="app"></div>
<script>
//禁止双击
document.onselectstart = function () {
return false;
};
//获取画布
var app = document.getElementById("app");
//字体集合
var arr = [
["卍", "卐"], ["买", "卖"], ["赢", "羸"],
["辨", "辫"], ["罐", "灌"], ["相", "湘"],
["周", "调"], ["昆", "混"], ["墓", "幕"],
["朋", "棚"], ["天", "夫"], ["狡", "皎"],
["杮", "柿"], ["代", "伐"], ["塍", "媵"],
["耇", "耉"], ["荼", "茶"], ["劲", "动"],
["亮", "壳"], ["竞", "竟"], ["己", "已"],
];
//读取存档
var j = 0;
if (localStorage["cundang"] !== undefined) {
var m = parseInt(localStorage["cundang"])
j = m;
b(arr[m])
} else {
b(arr[0])
}
var myDate = Date.parse(new Date());
//主程序
function b(xixi) {
document.getElementById("guan").innerText = j + 1;
myDate = Date.parse(new Date());
//清除画布
while (app.firstChild) {
app.removeChild(app.firstChild)
}
//读取字体大小存档
fontszie = 18;
if (localStorage["fontszie"] !== undefined) {
var xs = parseInt(localStorage["fontszie"])
fontszie = xs;
} else {
fontszie = 18;
}
app.style.fontSize = fontszie + "px";
//随机大小
x = 0;
y = 99;
var xy = Math.round(Math.random() * (y - x) + x);
//遍历
var px = "60px";
//左边提示
var left = document.createElement("div");
left.className = "left";
var lefttext = "";
for (var ii = 1; ii <= 10; ii++) {
lefttext += "<li>" + ii + "</li>";
}
left.innerHTML = lefttext;
//右边提示
var right = document.createElement("div");
right.className = "right";
var righttext = "";
for (var ii = 1; ii <= 10; ii++) {
righttext += "<li>" + ii + "</li>";
}
right.innerHTML = righttext;
for (var i = 0; i < 100; i++) {
var body = document.createElement("div");
body.className = "ab";
s = 15;
d = 100;
var to = Math.round(Math.random() * (d - s) + s);
body.style.width = px;
body.style.height = px;
body.style.display = "line-block";
body.style.backgroundColor = "#";
body.style.textAlign = "center";
body.style.lineHeight = px;
body.style.borderBottom = "1px #000 solid";
body.style.borderRight = "1px #000 solid";
//字体旋转
var font = document.createElement("font");
if (parseInt(localStorage["xuanz"]) || localStorage["xuanz"] === undefined) {
font.style.animation = "rotate " + to + "s linear infinite";
}
font.style.display = "inline-block";
font.style.width = px;
//取出要找的字
if (i === xy) {
font.innerText = xixi[1];
font.id = "haha";
// body.style.color="#f00"
} else {
font.className = "laji";
font.innerText = xixi[0];
}
//画布遍历
body.appendChild(font)
app.appendChild(body)
app.appendChild(left)
app.appendChild(right)
}
//错误点击
var gg = document.getElementsByClassName("laji");
for (var gj = 0; gj < gg.length; gj++) {
gg[gj].onclick = function () {
var that = this;
that.parentNode.style.backgroundColor = "#f00";
var st = setTimeout(function () {
that.parentNode.style.backgroundColor = "#e5eecc";
clearTimeout(st)
}, 100);
}
}
//正确点击
var haha = document.getElementById("haha");
haha.onclick = function () {
j++;
var g = arr.length
this.parentNode.style.backgroundColor = "#1AAD19";
this.style.color = "#fff"
var tip = document.createElement("div");
tip.className = "tip";
var myDate2 = Date.parse(new Date());
var smix = (myDate2 - myDate) / 1000
if (j < g) {
tip.style.backgroundColor = "#00CD66";
haha.onclick = "";
tip.innerHTML = "<div style='color: #fff;text-align: center;line-height: 80px'>恭喜你，耗时 " + smix + " 秒 成功了</div>" +
"<div style='text-align: center;line-height: 100px'><button style='width: 300px;height: 50px' onclick='xiayiguan(" + j + ")'>下一关</button</div>";
} else {
tip.style.backgroundColor = "#f00";
j--;
tip.innerHTML = "<div style='color: #fff;text-align: center;line-height: 80px'>恭喜你，耗时 " + smix + " 秒 成功了</div>" +
"<div style='text-align: center;line-height: 100px'><button style='width: 300px;height: 50px'>游戏已结束</button</div>";
console.error("游戏结束")
}
app.appendChild(tip)
}
}
function xiayiguan(j) {
localStorage["cundang"] = j;
b(arr[j])
}
//第一关
function diyi() {
localStorage["cundang"] = 0;
j = 0;
b(arr[j])
}
//存档
function save() {
localStorage["cundang"] = j;
}
//刷新关卡
function rest() {
b(arr[j])
}
//增加字体大小
function sizej() {
fontszie++;
localStorage["fontszie"] = fontszie;
app.style.fontSize = fontszie + "px";
}
//减小字体大小
function sizej2() {
fontszie--;
localStorage["fontszie"] = fontszie;
app.style.fontSize = fontszie + "px";
}
//默认18号字体大小
function sizej3() {
fontszie = 18;
localStorage["fontszie"] = fontszie;
app.style.fontSize = fontszie + "px";
}
function xuanz() {
var font = document.getElementsByTagName("font");
localStorage["xuanz"] = 0;
for (i = 0; i < font.length; i++) {
font[i].style.cssText = "animation: 0s linear 0s infinite normal none running rotate; display: inline-block;"
}
}
function xuanz2() {
localStorage["xuanz"] = 1;
// b(arr[j])
}
</script>
</body>
</html>
『回复列表(9|隐藏机器人聊天)』