console
var appButton = document.getElementById('appid');
var appCon = document.getElementById('appContain');
var appDom1 = appCon.getElementsByClassName("uds-app-content")[0];
var appDom2 = appCon.getElementsByClassName("uds-app-content")[1];
var appDom3 = appCon.getElementsByClassName("uds-app-content")[2];
var mimaTimeDom = appDom2.getElementsByClassName("app-body-title")[0].getElementsByTagName("SPAN")[0];
var mimaDom = appDom2.getElementsByClassName("app-body-mima")[0];
var mimaOperDom = appDom2.getElementsByClassName("app-body-oper")[0];
var saomaDom = appDom2.getElementsByClassName("app-foot-saoma")[0].getElementsByClassName("app-foot-sao1")[0];
var closeDom = appDom2.getElementsByClassName("uds-app-head")[0].getElementsByClassName("close")[0];
var backDom = appDom3.getElementsByClassName("uds-app-head")[0].getElementsByClassName("backTo")[0];
var time = 60;
var kouling = '782630';
appButton.addEventListener("click",function() {
if(appButton.classList.contains('text-show')) {
appButton.classList.remove('text-show');
}
appCon.classList.add('showApp');
setTimeout(() => {
appDom1.classList.remove('app-content-show');
appDom2.classList.add('app-content-show');
daojishi();
},1000);
});
closeDom.addEventListener("click",function() {
appCon.classList.remove('showApp');
});
mimaOperDom.addEventListener("click",function() {
time = 60;
mimaTimeDom.innerHTML = --time;
updateMima();
});
backDom.addEventListener("click",function() {
appDom3.classList.remove('app-content-show');
setTimeout(() => {
appDom2.classList.add('app-content-show');
},100);
});
saomaDom.addEventListener("click",function() {
appDom2.classList.remove('app-content-show');
setTimeout(() => {
appDom3.classList.add('app-content-show');
},100);
});
function daojishi() {
mimaTimeDom.innerHTML = --time;
if(time === 0) {
time = 60;
updateMima();
}
setTimeout(() => {daojishi();}, 1000);
}
function updateMima() {
kouling = '';
for(var i=0;i < 6;i++) {
kouling += Math.floor(10*Math.random());
}
mimaDom.innerHTML = kouling;
}
setTimeout(() => {
appButton.classList.add('text-show');
},500);
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="uds-app" id="appid">
<div class="uds-icon">
<div class="uds-icon-item"></div>
<div class="uds-icon-item"></div>
</div>
<span class="text">点我</span>
</div>
<div class="uds-app-container" id="appContain">
<div class="uds-app-content app-content-show">
<div class="uds-app-body">
<div class="uds-icon">
<div class="uds-icon-item"></div>
<div class="uds-icon-item"></div>
</div>
<div class="app-body-title">
轻轻一<span>掃</span>轻松搞定
</div>
</div>
<div class="uds-app-foot">
<span>c</span>
<span>2014-2017 中兴通讯股份有限公司</span>
</div>
</div>
<div class="uds-app-content">
<div class="uds-app-head">
<span>关于我们</span>
<span class="close">退出</span>
</div>
<div class="uds-app-body">
<div class="app-body-head">
当前口令
</div>
<div class="app-body-mima">
783630
</div>
<div class="app-body-title">
当前口令<span>40</span>秒后失效
</div>
<div class="app-body-oper">
<span class="fa fa-rotate-right"></span>口令刷新
</div>
</div>
<div class="uds-app-foot">
<div class="app-foot-saoma">
<div class="app-foot-sao1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span>扫一扫</span>
</div>
</div>
</div>
</div>
<div class="uds-app-content app-saomiao">
<div class="uds-app-head">
<span class="backTo">
<span class="fa fa-angle-left"></span>
返回
</span>
<span>扫描二维码</span>
</div>
<div class="uds-app-body">
<div class="app-body-saoma">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
.uds-app {
height:60px;
width:60px;
background: #fff;
border:solid 1px #d9d9d9;
border-radius:12px;
display:flex;
justify-content:center;
align-items: center;
margin: 50px;
transition:transform 50ms;
position:relative;
}
.uds-app:hover {
cursor: pointer;
box-shadow: 2px 2px 2px 5px #f2f2f2;
transform: translateX(1px) translateY(1px);
}
.uds-app .text {
position:absolute;
color:#666;
left:115%;
bottom:10px;
display:inline-block;
padding: 10px;
font-size:12px;
background-color:#ffffcc;
border-radius:6px;
width:30px;
opacity:0;
transition:opacity 500ms;
}
.uds-app .text:before {
content:"";
position:absolute;
right:100%;
bottom:6px;
display:inline-block;
border:solid 8px #ffffcc;
border-color: transparent #ffffcc transparent transparent;
}
.uds-app.text-show span.text {
opacity:1;
}
.uds-icon {
height: 85%;
width: 66%;
position: relative;
}
.uds-icon:after {
display:inline-block;
width:100%;
content: "ZTE";
color: #fff;
font-size:16px;
font-weight:500;
position: absolute;
top:30%;
left:0;
text-align:center;
}
.uds-icon .uds-icon-item {
display:inline-block;
width:50%;
height:100%;
background: #3385ff;
box-sizing:border-box;
float:left;
position: relative;
transform:none;
}
.uds-icon .uds-icon-item:first-child {
border-right: solid 0.5px #1a75ff;
border-radius: 0 0 0 100% / 0 0 0 70%;
}
.uds-icon .uds-icon-item:first-child:after {
content:"";
display:inline-block;
width:100%;
height:15%;
background: #fff;
border-radius: 0 0 100% 0 / 0 0 100% 0;
position:absolute;
top:-1px;
}
.uds-icon .uds-icon-item:last-child {
border-left: solid 0.5px #1a75ff;
border-radius: 0 0 100% 0 / 0 0 70% 0;
}
.uds-icon .uds-icon-item:last-child:after {
content:"";
display:inline-block;
width:100%;
height:15%;
background: #fff;
border-radius: 0 0 0 100%;
position:absolute;
top:-1px;
}
.uds-app-container {
height: 400px;
width:260px;
border:solid 1px #e6e6e6;
border-radius: 8px;
margin-left:200px;
overflow:hidden;
box-shadow: 2px 2px 2px 3px #f2f2f2;
opacity:0;
transition: opacity 500ms linear;
position:relative;
}
.uds-app-container.showApp {
opacity:1;
}
.uds-app-content {
height:inherit;
width:inherit;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
opacity:0;
z-index:0;
transition:all 800ms linear;
}
.uds-app-content:first-child {
background:#f2f2f2;
}
.uds-app-content:nth-child(2) {
background:#fff;
}
.uds-app-content.app-content-show {
opacity:1;
z-index:1;
}
.uds-app-content .uds-app-body {
z-index:1;
display:inline-flex;
flex-direction:column;
justify-content:center;
align-items: center;
margin-top:-30px;
color:#666;
}
.uds-app-content .uds-app-body .uds-icon {
height: 70px;
width: 52px;
}
.uds-app-content .uds-app-body .app-body-title {
font-size:14px;
color:#666;
margin-top: 15px;
}
.uds-app-content .uds-app-body .app-body-title span {
font-size:18px;
color: #0066ff;
margin-right:10px;
}
.uds-app-content .uds-app-body .app-body-head {
font-size:16px;
margin-bottom:10px;
}
.uds-app-content.app-saomiao .uds-app-head {
display:flex;
justify-content:center;
z-index: 5;
background:#f2f2f2;
}
.uds-app-content.app-saomiao .uds-app-head > span:first-child {
position:absolute;
left:20px;
}
.uds-app-content.app-saomiao .uds-app-head > span:first-child:hover .fa {
color:#666;
}
.uds-app-content.app-saomiao .uds-app-head > span:last-child {
font-size:14px;
color:#666;
}
.uds-app-content.app-saomiao .uds-app-body {
width:100%;
height:100%;
background:#a6a6a6;
margin-top:0;
}
.uds-app-content.app-saomiao .app-body-saoma {
width:180px;
height:180px;
background:#f2f2f2;
position:relative;
}
.uds-app-content.app-saomiao .app-body-saoma > span {
display:inline-block;
height: 24px;
width: 24px;
position:absolute;
}
.uds-app-content.app-saomiao .app-body-saoma > span:first-child {
top:0;
left:0;
border:none;
border-top:solid 2px #4db8ff;
border-left:solid 2px #4db8ff;
}
.uds-app-content.app-saomiao .app-body-saoma > span:nth-child(2) {
top:0;
right:0;
border:none;
border-top:solid 2px #4db8ff;
border-right:solid 2px #4db8ff;
}
.uds-app-content.app-saomiao .app-body-saoma > span:nth-child(3) {
bottom:0;
right:0;
border:none;
border-bottom:solid 2px #4db8ff;
border-right:solid 2px #4db8ff;
}
.uds-app-content.app-saomiao .app-body-saoma > span:nth-child(4) {
bottom:0;
left:0;
border:none;
border-bottom:solid 2px #4db8ff;
border-left:solid 2px #4db8ff;
}
.uds-app-content.app-saomiao .app-body-saoma > span:nth-child(5) {
display:inline-block;
height: 2px;
width: 90%;
top:0;
left:7px;
border-radius: 1px;
background-color:#4db8ff;
animation: amanionSaoma 6s infinite alternate linear;
}
@keyframes amanionSaoma
{
0% {top:3%;}
10% {top:10%;}
20% {top:20%;}
30% {top:30%;}
40% {top:40%;}
50% {top:50%;}
60% {top:60%;}
70% {top:70%;}
80% {top:80%;}
90% {top:90%;}
100% {top:97%;}
}
.uds-app-content .uds-app-body .app-body-mima {
font-size:18px;
color: #ff4d94;
padding:10px 60px;
background:#e6e6e6;
border-radius:19px;
}
.uds-app-content .uds-app-body .app-body-title {
font-size:12px;
color: #999999;
}
.uds-app-content .uds-app-body .app-body-title span {
font-size:12px;
font-weight:400;
color: #3399ff;
margin: 0 3px;
}
.uds-app-content .uds-app-body .app-body-oper {
font-size:12px;
color: #999999;
margin-top:8px;
color: #3399ff;
cursor:pointer;
}
.uds-app-content .uds-app-body .app-body-oper span {
margin-right:5px;
}
.uds-app-content .uds-app-foot {
width:inherit;
font-size:12px;
color:#666;
display:flex;
align-items:center;
justify-content:center;
position:absolute;
bottom: 10px;
left:0;
}
.uds-app-content .uds-app-foot span:first-child {
display:inline-block;
height:12px;
width:12px;
border-radius:50%;
border:solid 1px #b3b3b3;
line-height:12px;
text-align:center;
}
.uds-app-content .uds-app-foot .app-foot-saoma {
width:inherit;
height:120px;
background:#3399ff;
display:flex;
justify-content:center;
align-items:center;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 {
display:inline-block;
height: 56px;
width: 56px;
position:relative;
cursor:pointer;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:not(:last-child) {
display:inline-block;
height: 18px;
width: 18px;
border:none;
position:absolute;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:first-child {
top:0;
left:0;
border:none;
border-top:solid 2px #fff;
border-left:solid 2px #fff;
border-radius: 10px 0 0 0;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:nth-child(2) {
top:0;
right:0;
border-top:solid 2px #fff;
border-right:solid 2px #fff;
border-radius: 0 10px 0 0;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:nth-child(3) {
bottom:0;
right:0;
border-right:solid 2px #fff;
border-bottom:solid 2px #fff;
border-radius: 0 0 10px 0;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:nth-child(4) {
bottom:0;
left:0;
border-left:solid 2px #fff;
border-bottom:solid 2px #fff;
border-radius: 0 0 0 10px;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:nth-child(5) {
display:inline-block;
height: 2px;
width: 100%;
position:absolute;
top:50%;
left:0;
border-radius: 1px;
background-color:#fff;
}
.uds-app-foot .app-foot-saoma .app-foot-sao1 > span:last-child {
display:inline-block;
font-size:12px;
color:#fff;
width: 100%;
text-align:center;
position:absolute;
bottom:-18px;
}
.uds-app-content .uds-app-head {
padding:5px 10px;
border-bottom:solid 1px #e6e6e6;
width:inherit;
position:absolute;
left:0;
top: 0;
display:flex;
justify-content:space-between;
box-sizing:border-box;
}
.uds-app-content .uds-app-head span {
font-size:12px;
color:#999;
cursor:pointer;
}
.uds-app-content .uds-app-head span:hover {
color:#595959;
}
.uds-app-content .uds-app-head span:last-child {
font-size:12px;
color:#999;
cursor:pointer;
}