1.login页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#content{
width: 100%;
height: 100%;
display: flex;
background: url(img/bg01.png);
background-size:100% 100%;
position: relative;
}
#box{
width: 400px;
height: 300px;
background: rgba(0,0,0,0.2);
margin:auto ;
border-radius:20px ;
position: relative;
}
#font01{
display: block;
width: 400px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
font-size: 40px;
font-family: 楷体;
position: relative;
}
#box01{
width: 90%;
height: 40px;
border: 1px solid white;
margin-top: 10px;
margin-left: 5%;
margin-bottom:10px ;
padding-left: 10px;
line-height: 40px;
border-radius:10px ;
box-sizing: border-box;
position: relative;
}
#box02{
width: 90%;
height: 40px;
border: 1px solid white;
margin-top: 10px;
margin-left: 5%;
margin-bottom:10px ;
padding-left: 10px;
line-height: 40px;
border-radius:10px ;
box-sizing: border-box;
position: relative;
}
.text-input{
display: inline-block;
width: 13%;
color:black
}
.input01{
display: inline-block;
position: absolute;
width:87% ;
height: 100%;
top: 0;
right: 0;
outline: none;
border-width: 0;
color: black;
background:transparent ;
}
#box01:hover{
background: white;
}
#box02:hover{
background: white;
}
#box03{
width: 90%;
margin-left: 5%;
}
.text01{
float: right;
text-decoration: none;
color: white;
margin-left: 10px;
}
.clearafter:after{
display: block;
content: ".";
height: 0;
clear: both;
overflow: hidden;
}
#btn-login{
display: block;
width: 100px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -50px;
text-align: center;
line-height: 50px;
border: 1px solid orange;
color: white;
background: orange;
border-radius:20px ;
}
</style>
</head>
<body>
<div id="content">
<div id="box">
<font id="font01">你画我猜</font>
<hr />
<div id="box01">
<font class="text-input">账号</font>
<input placeholder="请输入账号"type="text" id="username"class="input01"/>
</div>
<div id="box02">
<font class="text-input">密码</font>
<input placeholder="请输入密码" type="password"id="password"class="input01"/>
</div>
<div id="box03" class="clearafter">
<a href="#" class="text01" id="btn_regist">注册</a>
<a href="#"class="text01">|</a>
<a href="#"class="text01" id="btn_wjmm">忘记密码</a>
</div>
<font id="btn-login" onclick="test()">登录</font>
</div>
</div>
</body>
<script type="text/javascript">
var test=function(){
var uinput=document.getElementById("username");
var pinput=document.getElementById("password");
var uname=uinput.value;
var pname=pinput.value;
if(uname.length<=0){
alert("请输入账号!")
return;
}
if(pname.length<=0){
alert("请输入密码")
return;
}
if (uname=="admin"&&pname=="123456"){
var name="admin"
var sex="男"
var name=escape(name);
var sex=escape(sex);
document.cookie="name="+name;
document.cookie="sex="+sex;
location.href="main.html"
}
else{
alert("账号密码不匹配")
return;
}
}
</script>
</html>
2.main页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#content{
width: 100%;
height: 100%;
background:url(img/bg02.gif) ;
background-size:50% 50%;
position: relative;
}
#box-gm01{
width: 100%;
height: 60px;
text-align: right;
position: relative;
}
.gm-text01{
text-decoration: none;
color: white;
text-align: center;
line-height: 60px;
border:1px solid white;
margin: 15px;
border-radius: 5px;
background:rgba(0,0,0,0.4);
margin-top: 20px;
}
#box-gm02{
width: 600px;
height: 450px;
background: rgba(0,0,0,0.3);
position: absolute;
left: 50%;
margin-left:-300px ;
top: 50%;
margin-top: -225px;
border-radius: 20px;
}
#gm-time{
display: block;
width: 50%;
height: 100%;
text-align: center;
line-height: 450px;
color: white;
font-size: 70px;
box-sizing: border-box;
border-right:1px solid white ;
}
#box-gm03{
width: 50%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#gm-question{
display: inline-block;
position: absolute;
top: 10px;
left: 0;
color: white;
}
#gm-score{
display: inline-block;
position: absolute;
top: 10px;
right: 20px;
color: white;
}
#gm-title{
display: block;
width: 100%;
height: 80px;
top: 50px;
position: absolute;
text-align: center;
line-height:80px ;
font-size: 40px;
font-family: 楷体;
color: white;
}
#gm-ts{
display: block;
position: absolute;
width: 100%;
height: 180px;
background: rgba(0,0,0,0.6);
top: 120px;
text-align: center;
line-height: 180px;
font-size: 50px;
color: white;
}
#btn-start{
display: block;
position: absolute;
width: 100px;
height: 50px;
background: orange;
top: 350px;
left: 50%;
margin-left: -50px;
text-align: center;
line-height: 50px;
border:1px solid white;
border-radius: 10px;
box-shadow: 5px 10px 10px white;
}
#box-gm04{
position: absolute;
width: 200px;
height: 50px;
bottom: 50px;
left: 50%;
margin-left: -100px;
display: none;
}
#btn-yes{
display:inline-block;
position: absolute;
left: 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid white;
border-radius: 50%;
border-width: 2px;
color: white;
}
#btn-no{
display:inline-block;
position: absolute;
right: 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid white;
border-radius: 50%;
border-width:2px ;
color: white;
}
</style>
</head>
<body>
<div id="content">
<div id="box-gm01">
<a href="#" class="gm-text01" id="gm-name">xxx</a>
<a href="#" class="gm-text01" id="btn-exit">退出登录</a>
</div>
<div id="box-gm02">
<font id="gm-time">180</font>
<div id="box-gm03">
<font id="gm-question">第一题</font>
<font id="gm-score">得分:0</font>
<font id="gm-title">你画我猜</font>
<font id="gm-ts">准备好了吗?</font>
<font id="btn-start" >开始游戏</font>
<div id="box-gm04">
<font id="btn-yes">对</font>
<font id="btn-no">错</font>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var info=document.cookie;
console.log(info);
if(info.length<=0){
location.href="login.html"
}
var name=null;
var sex=null;
var infos=info.split(";")
for (var i=0;i<infos.length;i++) {
var kv=infos[i].split("=")
var k=kv[0].trim();
var v=kv[1].trim();
if(k=="name"){
name=unescape(v)
}else if(k=="sex"){
sex==unescape(v)
}
}
if(name.length<=0){
location.href="login.html"
}
var gname=document.getElementById("gm-name");
var bexit=document.getElementById("btn-exit")
var gtime=document.getElementById("gm-time");
var gscore=document.getElementById("gm-score");
var gquestion=document.getElementById("gm-question");
var gts=document.getElementById("gm-ts");
var bstart=document.getElementById("btn-start");
var bog04=document.getElementById("box-gm04");
var byes=document.getElementById("btn-yes");
var bno=document.getElementById("btn-no");
var num=1;
var score=0;
var texts = ["鬼哭狼嚎","飞檐走壁","凤姐","犀利哥",
"三长二短","抱头鼠窜","鸡鸣狗盗",
"头破血流","坐井观天","眼高手低","目瞪口呆",
"胸无点墨",
"鸡飞狗跳","鼠目寸光","盲人摸象","画蛇添足",
"画龙点睛","抱头鼠窜","狗急跳墙","虎背熊腰",
"守株待兔","亡羊补牢","对牛弹琴","如鱼得水",
"打草惊蛇","打草惊蛇","走马观花","三头六臂"];
var task=null;
gname.innerText=name
bexit.onclick=function(){
document.cookie="name="+"";
document.cookie="sex="+"";
location.href="login.html"
}
function djs(){
var time=parseInt(gtime.innerText);
if(time>0){
time--;
gtime.innerText=time+"";
}
if(time<=0){
alert("您的得分为:"+score)
clearInterval(task);
num=1;
score=0;
location.reload();
}
}
function nexttext(){
var num=Math.random()*texts.length
num=Math.floor(num);
var t=texts[num];
gts.innerText=t;
}
bstart.onclick=function(){
bstart.style.display="none";
bog04.style.display="block";
nexttext();
task=setInterval("djs()",1000)
}
byes.onclick=function(){
num++;
score++;
nexttext();
gquestion.innerText="第"+num+"题";
gscore.innerText="得分:"+score;
}
bno.onclick=function(){
num++;
nexttext();
gquestion.innerText="第"+num+"题";
}
</script>
</html>将登录页面命名为login.html
主页面命名为main.html
登录账号为:admin
密码为:123456
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#content{
width: 100%;
height: 100%;
background:url(img/bg02.gif) ;
background-size:50% 50%;
position: relative;
}
#box-gm01{
width: 100%;
height: 60px;
text-align: right;
position: relative;
}
.gm-text01{
text-decoration: none;
color: white;
text-align: center;
line-height: 60px;
border:1px solid white;
margin: 15px;
border-radius: 5px;
background:rgba(0,0,0,0.4);
margin-top: 20px;
}
#box-gm02{
width: 600px;
height: 450px;
background: rgba(0,0,0,0.3);
position: absolute;
left: 50%;
margin-left:-300px ;
top: 50%;
margin-top: -225px;
border-radius: 20px;
}
#gm-time{
display: block;
width: 50%;
height: 100%;
text-align: center;
line-height: 450px;
color: white;
font-size: 70px;
box-sizing: border-box;
border-right:1px solid white ;
}
#box-gm03{
width: 50%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#gm-question{
display: inline-block;
position: absolute;
top: 10px;
left: 0;
color: white;
}
#gm-score{
display: inline-block;
position: absolute;
top: 10px;
right: 20px;
color: white;
}
#gm-title{
display: block;
width: 100%;
height: 80px;
top: 50px;
position: absolute;
text-align: center;
line-height:80px ;
font-size: 40px;
font-family: 楷体;
color: white;
}
#gm-ts{
display: block;
position: absolute;
width: 100%;
height: 180px;
background: rgba(0,0,0,0.6);
top: 120px;
text-align: center;
line-height: 180px;
font-size: 50px;
color: white;
}
#btn-start{
display: block;
position: absolute;
width: 100px;
height: 50px;
background: orange;
top: 350px;
left: 50%;
margin-left: -50px;
text-align: center;
line-height: 50px;
border:1px solid white;
border-radius: 10px;
box-shadow: 5px 10px 10px white;
}
#box-gm04{
position: absolute;
width: 200px;
height: 50px;
bottom: 50px;
left: 50%;
margin-left: -100px;
display: none;
}
#btn-yes{
display:inline-block;
position: absolute;
left: 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid white;
border-radius: 50%;
border-width: 2px;
color: white;
}
#btn-no{
display:inline-block;
position: absolute;
right: 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid white;
border-radius: 50%;
border-width:2px ;
color: white;
}
</style>
</head>
<body>
<div id="content">
<div id="box-gm01">
<a href="#" class="gm-text01" id="gm-name">xxx</a>
<a href="#" class="gm-text01" id="btn-exit">退出登录</a>
</div>
<div id="box-gm02">
<font id="gm-time">180</font>
<div id="box-gm03">
<font id="gm-question">第一题</font>
<font id="gm-score">得分:0</font>
<font id="gm-title">你画我猜</font>
<font id="gm-ts">准备好了吗?</font>
<font id="btn-start" >开始游戏</font>
<div id="box-gm04">
<font id="btn-yes">对</font>
<font id="btn-no">错</font>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var info=document.cookie;
console.log(info);
if(info.length<=0){
location.href="login.html"
}
var name=null;
var sex=null;
var infos=info.split(";")
for (var i=0;i<infos.length;i++) {
var kv=infos[i].split("=")
var k=kv[0].trim();
var v=kv[1].trim();
if(k=="name"){
name=unescape(v)
}else if(k=="sex"){
sex==unescape(v)
}
}
if(name.length<=0){
location.href="login.html"
}
var gname=document.getElementById("gm-name");
var bexit=document.getElementById("btn-exit")
var gtime=document.getElementById("gm-time");
var gscore=document.getElementById("gm-score");
var gquestion=document.getElementById("gm-question");
var gts=document.getElementById("gm-ts");
var bstart=document.getElementById("btn-start");
var bog04=document.getElementById("box-gm04");
var byes=document.getElementById("btn-yes");
var bno=document.getElementById("btn-no");
var num=1;
var score=0;
var texts = ["鬼哭狼嚎","飞檐走壁","凤姐","犀利哥",
"三长二短","抱头鼠窜","鸡鸣狗盗",
"头破血流","坐井观天","眼高手低","目瞪口呆",
"胸无点墨",
"鸡飞狗跳","鼠目寸光","盲人摸象","画蛇添足",
"画龙点睛","抱头鼠窜","狗急跳墙","虎背熊腰",
"守株待兔","亡羊补牢","对牛弹琴","如鱼得水",
"打草惊蛇","打草惊蛇","走马观花","三头六臂"];
var task=null;
gname.innerText=name
bexit.οnclick=function(){
document.cookie="name="+"";
document.cookie="sex="+"";
location.href="login.html"
}
function djs(){
var time=parseInt(gtime.innerText);
if(time>0){
time--;
gtime.innerText=time+"";
}
if(time<=0){
alert("您的得分为:"+score)
clearInterval(task);
num=1;
score=0;
location.reload();
}
}
function nexttext(){
var num=Math.random()*texts.length
num=Math.floor(num);
var t=texts[num];
gts.innerText=t;
}
bstart.οnclick=function(){
bstart.style.display="none";
bog04.style.display="block";
nexttext();
task=setInterval("djs()",1000)
}
byes.οnclick=function(){
num++;
score++;
nexttext();
gquestion.innerText="第"+num+"题";
gscore.innerText="得分:"+score;
}
bno.οnclick=function(){
num++;
nexttext();
gquestion.innerText="第"+num+"题";
}
</script>
</html>
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
