增加404界面动画效果
wangziyangyang
parent
6fbe833e70
commit
1c17a6c522
|
|
@ -0,0 +1,197 @@
|
||||||
|
/*
|
||||||
|
* 作者: QYZQ
|
||||||
|
* 时间:2018.2.4
|
||||||
|
* 备注:404页面设计灵感源于FreePik网站图片(https://www.freepik.com/free-vector/funny-error-404-background-design_1161579.htm#term=404&page=1&position=2),
|
||||||
|
* FreePik网站提供免费下载渠道,网站也有提示侵权的通知,如有侵权请联系(Email: greatyuzequn@outlook.com),QYZQ将及时处理.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body, div, p, a{
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-decoration: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: linear-gradient(#c7c8cf,#e8e8e9,#c7c8cf);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code p{
|
||||||
|
height: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
text-align: center;
|
||||||
|
font-family: BalboaWide Bold;
|
||||||
|
font-size: 50px;
|
||||||
|
color: #697a8a;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road{
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow{
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 25%;
|
||||||
|
width: 330px;
|
||||||
|
height: 70px;
|
||||||
|
border:0px;
|
||||||
|
background: linear-gradient(#777373,#3c3c3c);
|
||||||
|
box-shadow: 0px 3px 10px 2px #464646, 0px -3px 10px 2px #3a3939 inset;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road p{
|
||||||
|
display: block;
|
||||||
|
margin-top: 50px;
|
||||||
|
height: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
text-align: center;
|
||||||
|
font-family: BalboaWide Bold;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #697a8a;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.road .shadow .bubble{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -180px;
|
||||||
|
left: 350px;
|
||||||
|
width: 246px;
|
||||||
|
height: 179px;
|
||||||
|
background-image: url(../image/bubble.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .bubble a{
|
||||||
|
line-height: 140px;
|
||||||
|
font-family: "microsoft yahei";
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #F8F8F5;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: 1s;
|
||||||
|
user-select:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .bubble a:hover{
|
||||||
|
color: #FF8C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .shelt{
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: -80px;
|
||||||
|
width: 330px;
|
||||||
|
height: 150px;
|
||||||
|
border:0px;
|
||||||
|
border-radius: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.road .shadow .head{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -60px;
|
||||||
|
top: 150px;
|
||||||
|
width: 120px;
|
||||||
|
height: 300px;
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 100% 100% 0 0;
|
||||||
|
background-color: #292d38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .head .eyes{
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 70px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .head .eyes .lefteye,.road .shadow .head .eyes .righteye{
|
||||||
|
position: relative;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #f1f2f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .head .eyes .lefteye .eyebrow{
|
||||||
|
position: absolute;
|
||||||
|
width: 38px;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
height: 19px;
|
||||||
|
border-radius: 19px 19px 0 0;
|
||||||
|
background-color:#4c5465;
|
||||||
|
clip: rect(0px 38px 0px 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .head .eyes .righteye .eyebrow{
|
||||||
|
position: absolute;
|
||||||
|
width: 38px;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
height: 19px;
|
||||||
|
border-radius: 19px 19px 0 0;
|
||||||
|
background-color:#4c5465;
|
||||||
|
clip: rect(0px 38px 0px 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.road .shadow .head .eyes .lefteye .eyeball{
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color:#292d38 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .head .eyes .righteye .eyeball{
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color:#292d38 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.road .shadow .hat{
|
||||||
|
position: absolute;
|
||||||
|
top: -297px;
|
||||||
|
left: -8px;
|
||||||
|
width: 330px;
|
||||||
|
height: 330px;
|
||||||
|
background: url(../image/sign.png) no-repeat;
|
||||||
|
transform-origin: left bottom;
|
||||||
|
transform: rotate(17deg);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,62 @@
|
||||||
|
var parallel = 17;
|
||||||
|
var headHeight = 150;
|
||||||
|
var opacity = 0;
|
||||||
|
var eyeBrowHeight = 0;
|
||||||
|
var step = 1;
|
||||||
|
var timer_show;
|
||||||
|
var timer_eyebrow;
|
||||||
|
|
||||||
|
document.onmousemove = mouseMove;
|
||||||
|
|
||||||
|
function mouseMove(e){
|
||||||
|
/*眼球转动*/
|
||||||
|
}
|
||||||
|
|
||||||
|
function startAnimation(){
|
||||||
|
timer_show = setInterval('rotateCounterclockwise()', 55);
|
||||||
|
window.setTimeout(function(){
|
||||||
|
window.clearInterval(timer_eyebrow);
|
||||||
|
timer_show = setInterval('rotateClockwise()', 55);
|
||||||
|
},1000*6);
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotateCounterclockwise() {
|
||||||
|
parallel = parallel - 0.3;
|
||||||
|
headHeight = headHeight - 2.5;
|
||||||
|
opacity = (17 - parallel)/17;
|
||||||
|
if(parallel > 0) {
|
||||||
|
$('.head').css('top',headHeight+'px');
|
||||||
|
$('.hat').css('transform', 'rotate(' + parallel + 'deg)');
|
||||||
|
// $('.code p').css('opacity',opacity);
|
||||||
|
$('.bubble').css('opacity',opacity);
|
||||||
|
}else{
|
||||||
|
window.clearInterval(timer_show);
|
||||||
|
timer_eyebrow = setInterval('flash()',10);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotateClockwise() {
|
||||||
|
parallel = parallel + 0.3;
|
||||||
|
headHeight = headHeight + 2.5;
|
||||||
|
opacity = (17 - parallel)/17;
|
||||||
|
if(parallel <= 17) {
|
||||||
|
$('.head').css('top',headHeight+'px');
|
||||||
|
$('.hat').css('transform', 'rotate(' + parallel + 'deg)');
|
||||||
|
// $('.code p').css('opacity',opacity);
|
||||||
|
$('.bubble').css('opacity',opacity);
|
||||||
|
}else{
|
||||||
|
window.clearInterval(timer_show);
|
||||||
|
startAnimation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function flash(){
|
||||||
|
eyeBrowHeight += step;
|
||||||
|
$('.lefteye .eyebrow').css('clip','rect(0px 38px ' + eyeBrowHeight + 'px 0px)');
|
||||||
|
$('.righteye .eyebrow').css('clip','rect(0px 38px ' + eyeBrowHeight + 'px 0px)');
|
||||||
|
if(eyeBrowHeight % 19 === 0)
|
||||||
|
step = -step;
|
||||||
|
}
|
||||||
|
|
||||||
|
startAnimation();
|
||||||
|
|
@ -1,109 +1,39 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8">
|
||||||
<title>404</title>
|
<title>你的资源掉了！</title>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewpoint" content="width=device-width,initial-scale=1">
|
||||||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
<link rel="stylesheet" href="${request.contextPath}/css/404.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="format-detection" content="telephone=no">
|
|
||||||
<#include "${request.contextPath}/common/common.ftl">
|
|
||||||
<style>
|
|
||||||
.error .clip .shadow {height:180px;}
|
|
||||||
.error .clip:nth-of-type(2) .shadow {width:130px;}
|
|
||||||
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:250px;}
|
|
||||||
.error .digit {width:150px;height:150px;line-height:150px;font-size:120px;font-weight:bold;}
|
|
||||||
.error h2 {font-size:32px;}
|
|
||||||
.error .msg {top:-190px;left:30%;width:80px;height:80px;line-height:80px;font-size:32px;}
|
|
||||||
.error span.triangle {top:70%;right:0%;border-left:20px solid #535353;border-top:15px solid transparent;border-bottom:15px solid transparent;}
|
|
||||||
.error .container-error-404 {top: 50%;margin-top: 250px;position:relative;height:250px;padding-top:40px;}
|
|
||||||
.error .container-error-404 .clip {display:inline-block;transform:skew(-45deg);}
|
|
||||||
.error .clip .shadow {overflow:hidden;}
|
|
||||||
.error .clip:nth-of-type(2) .shadow {overflow:hidden;position:relative;box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);}
|
|
||||||
.error .clip:nth-of-type(3) .shadow:after,.error .clip:nth-of-type(1) .shadow:after {content:"";position:absolute;right:-8px;bottom:0px;z-index:9999;height:100%;width:10px;background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);border-radius:50%;}
|
|
||||||
.error .clip:nth-of-type(3) .shadow:after {left:-8px;}
|
|
||||||
.error .digit {position:relative;top:8%;color:white;background:#1aa094;border-radius:50%;display:inline-block;transform:skew(45deg);}
|
|
||||||
.error .clip:nth-of-type(2) .digit {left:-10%;}
|
|
||||||
.error .clip:nth-of-type(1) .digit {right:-20%;}
|
|
||||||
.error .clip:nth-of-type(3) .digit {left:-20%;}
|
|
||||||
.error h2 {font-size:24px;color:#A2A2A2;font-weight:bold;padding-bottom:20px;}
|
|
||||||
.error .tohome {font-size:16px;color:#07B3F9;}
|
|
||||||
.error .msg {position:relative;z-index:9999;display:block;background:#535353;color:#A2A2A2;border-radius:50%;font-style:italic;}
|
|
||||||
.error .triangle {position:absolute;z-index:999;transform:rotate(45deg);content:"";width:0;height:0;}
|
|
||||||
@media(max-width:767px) {.error .clip .shadow {height:100px;}
|
|
||||||
.error .clip:nth-of-type(2) .shadow {width:80px;}
|
|
||||||
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:100px;}
|
|
||||||
.error .digit {width:80px;height:80px;line-height:80px;font-size:52px;}
|
|
||||||
.error h2 {font-size:18px;}
|
|
||||||
.error .msg {top:-110px;left:15%;width:40px;height:40px;line-height:40px;font-size:18px;}
|
|
||||||
.error span.triangle {top:70%;right:-3%;border-left:10px solid #535353;border-top:8px solid transparent;border-bottom:8px solid transparent;}
|
|
||||||
.error .container-error-404 {height:150px;}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="error">
|
<div class="code">
|
||||||
<div class="container-floud">
|
<p>ERROR 404</p>
|
||||||
<div style="text-align: center">
|
</div>
|
||||||
<div class="container-error-404">
|
<div class="road">
|
||||||
<div class="clip">
|
<div class="shadow">
|
||||||
<div class="shadow">
|
<div class="shelt">
|
||||||
<span class="digit thirdDigit"></span>
|
<div class="head">
|
||||||
</div>
|
<div class="eyes">
|
||||||
</div>
|
<div class="lefteye">
|
||||||
<div class="clip">
|
<div class="eyeball"></div>
|
||||||
<div class="shadow">
|
<div class="eyebrow"></div>
|
||||||
<span class="digit secondDigit"></span>
|
</div>
|
||||||
</div>
|
<div class="righteye">
|
||||||
</div>
|
<div class="eyeball"></div>
|
||||||
<div class="clip">
|
<div class="eyebrow"></div>
|
||||||
<div class="shadow">
|
</div>
|
||||||
<span class="digit firstDigit"></span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="msg">OH!
|
<div class="hat"></div>
|
||||||
<span class="triangle"></span>
|
<div class="bubble">
|
||||||
</div>
|
<a href="index.html">功能开发中！</a>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="h1">很抱歉，你访问的页面找不到了</h2>
|
</div>
|
||||||
</div>
|
<p>修身正心，齐家治国</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
function randomNum() {
|
|
||||||
return Math.floor(Math.random() * 9) + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var loop1, loop2, loop3, time = 30, i = 0, number;
|
|
||||||
loop3 = setInterval(function () {
|
|
||||||
if (i > 40) {
|
|
||||||
clearInterval(loop3);
|
|
||||||
document.querySelector('.thirdDigit').textContent = 4;
|
|
||||||
} else {
|
|
||||||
document.querySelector('.thirdDigit').textContent = randomNum();
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}, time);
|
|
||||||
loop2 = setInterval(function () {
|
|
||||||
if (i > 80) {
|
|
||||||
clearInterval(loop2);
|
|
||||||
document.querySelector('.secondDigit').textContent = 0;
|
|
||||||
} else {
|
|
||||||
document.querySelector('.secondDigit').textContent = randomNum();
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}, time);
|
|
||||||
loop1 = setInterval(function () {
|
|
||||||
if (i > 100) {
|
|
||||||
clearInterval(loop1);
|
|
||||||
document.querySelector('.firstDigit').textContent = 4;
|
|
||||||
} else {
|
|
||||||
document.querySelector('.firstDigit').textContent = randomNum();
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}, time);
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
<script type="text/javascript" src="${request.contextPath}/js/layuimodule/404.js" ></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>404</title>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
<#include "${request.contextPath}/common/common.ftl">
|
||||||
|
<style>
|
||||||
|
.error .clip .shadow {height:180px;}
|
||||||
|
.error .clip:nth-of-type(2) .shadow {width:130px;}
|
||||||
|
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:250px;}
|
||||||
|
.error .digit {width:150px;height:150px;line-height:150px;font-size:120px;font-weight:bold;}
|
||||||
|
.error h2 {font-size:32px;}
|
||||||
|
.error .msg {top:-190px;left:30%;width:80px;height:80px;line-height:80px;font-size:32px;}
|
||||||
|
.error span.triangle {top:70%;right:0%;border-left:20px solid #535353;border-top:15px solid transparent;border-bottom:15px solid transparent;}
|
||||||
|
.error .container-error-404 {top: 50%;margin-top: 250px;position:relative;height:250px;padding-top:40px;}
|
||||||
|
.error .container-error-404 .clip {display:inline-block;transform:skew(-45deg);}
|
||||||
|
.error .clip .shadow {overflow:hidden;}
|
||||||
|
.error .clip:nth-of-type(2) .shadow {overflow:hidden;position:relative;box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);}
|
||||||
|
.error .clip:nth-of-type(3) .shadow:after,.error .clip:nth-of-type(1) .shadow:after {content:"";position:absolute;right:-8px;bottom:0px;z-index:9999;height:100%;width:10px;background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);border-radius:50%;}
|
||||||
|
.error .clip:nth-of-type(3) .shadow:after {left:-8px;}
|
||||||
|
.error .digit {position:relative;top:8%;color:white;background:#1aa094;border-radius:50%;display:inline-block;transform:skew(45deg);}
|
||||||
|
.error .clip:nth-of-type(2) .digit {left:-10%;}
|
||||||
|
.error .clip:nth-of-type(1) .digit {right:-20%;}
|
||||||
|
.error .clip:nth-of-type(3) .digit {left:-20%;}
|
||||||
|
.error h2 {font-size:24px;color:#A2A2A2;font-weight:bold;padding-bottom:20px;}
|
||||||
|
.error .tohome {font-size:16px;color:#07B3F9;}
|
||||||
|
.error .msg {position:relative;z-index:9999;display:block;background:#535353;color:#A2A2A2;border-radius:50%;font-style:italic;}
|
||||||
|
.error .triangle {position:absolute;z-index:999;transform:rotate(45deg);content:"";width:0;height:0;}
|
||||||
|
@media(max-width:767px) {.error .clip .shadow {height:100px;}
|
||||||
|
.error .clip:nth-of-type(2) .shadow {width:80px;}
|
||||||
|
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:100px;}
|
||||||
|
.error .digit {width:80px;height:80px;line-height:80px;font-size:52px;}
|
||||||
|
.error h2 {font-size:18px;}
|
||||||
|
.error .msg {top:-110px;left:15%;width:40px;height:40px;line-height:40px;font-size:18px;}
|
||||||
|
.error span.triangle {top:70%;right:-3%;border-left:10px solid #535353;border-top:8px solid transparent;border-bottom:8px solid transparent;}
|
||||||
|
.error .container-error-404 {height:150px;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="error">
|
||||||
|
<div class="container-floud">
|
||||||
|
<div style="text-align: center">
|
||||||
|
<div class="container-error-404">
|
||||||
|
<div class="clip">
|
||||||
|
<div class="shadow">
|
||||||
|
<span class="digit thirdDigit"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clip">
|
||||||
|
<div class="shadow">
|
||||||
|
<span class="digit secondDigit"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clip">
|
||||||
|
<div class="shadow">
|
||||||
|
<span class="digit firstDigit"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="msg">OH!
|
||||||
|
<span class="triangle"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="h1">功能正在开发中！！请耐心等待</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function randomNum() {
|
||||||
|
return Math.floor(Math.random() * 9) + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var loop1, loop2, loop3, time = 30, i = 0, number;
|
||||||
|
loop3 = setInterval(function () {
|
||||||
|
if (i > 40) {
|
||||||
|
clearInterval(loop3);
|
||||||
|
document.querySelector('.thirdDigit').textContent = 4;
|
||||||
|
} else {
|
||||||
|
document.querySelector('.thirdDigit').textContent = randomNum();
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}, time);
|
||||||
|
loop2 = setInterval(function () {
|
||||||
|
if (i > 80) {
|
||||||
|
clearInterval(loop2);
|
||||||
|
document.querySelector('.secondDigit').textContent = 0;
|
||||||
|
} else {
|
||||||
|
document.querySelector('.secondDigit').textContent = randomNum();
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}, time);
|
||||||
|
loop1 = setInterval(function () {
|
||||||
|
if (i > 100) {
|
||||||
|
clearInterval(loop1);
|
||||||
|
document.querySelector('.firstDigit').textContent = 4;
|
||||||
|
} else {
|
||||||
|
document.querySelector('.firstDigit').textContent = randomNum();
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}, time);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue