HTML,CSS,JS(Day35)----你画我猜小游戏
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.lengthnum=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>
HTML,CSS,JS(Day35)----你画我猜小游戏相关推荐
- css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
- html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
- Web前端--HTML+CSS+JS实现仿切水果小游戏
目录 代码目录: 主要代码实现: 源码获取 效果演示: 代码目录: 主要代码实现: CSS样式: * {margin: 0;padding: 0;list-style-type: none;touch ...
- 用HTML+CSS+JS写的切水果小游戏它来了
前言 切水果游戏曾经是一款风靡手机的休闲游戏,今天要分享的就是一款网页版的切水果游戏, 由HTML+CSS+JS实现,虽然功能和原版的相差太大,但基本的功能具备,效果逼真.感兴趣的小伙伴可收藏学习(完 ...
- canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
- demo-原生js实现你说我猜小游戏
1.完成的功能 (1)根据选择的分类(生活.成语.美食)来显示对应的词语. (2)开始游戏后设置60s倒计时,游戏结束后提示游戏已结束. (3)点击true后,累加对的题数,显示出来. (4)不改变分 ...
- 你画我猜小游戏接入方法
近年来,越来越多的小游戏走进了大众视野,你画我猜这款小游戏以其互动性和趣味性吸引了许多年轻用户,是当中比较流行的小游戏.因此,可以选择在产品中嵌入这类小游戏来吸引用户留存和促活,带动产品的流量. 你画 ...
- Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- 11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
最新文章
- android中实现返回首页功能
- python3.8.2汉化包-Python3.8.2中文版 32/64位 官方最新版
- SQL高级---SQL 约束 (Constraints)
- 关于2021年 美赛论文 提交失败的解决方法
- 【翻译】C#表达式中的动态查询
- Python中socket入门例子
- 东北师范计算机研究生课表,东北师范大学全日制工程硕士(计算机技术)专业学位研究生实践教学管理办法...
- Spring Boot（2）---Spring Boot文档及其导航说明
- linux操作系统-SSH原理介绍与免密运用与远程命令操作
- java_oop_三大特性
- 实现成长之路——SpringBean三：实例化Bean的姿势都有哪些？
- php版本与vc运行库
- 【word论文排版教程1】页面设置
- 计算机软件 如何评正高职称,正高职称评审条件
- 有限元形函数及JuliaFEM中的实现方式
- 线程学习（13）-偏向锁
- 工具系列——XMind 8 Update 7的破解步骤
- linkbutton 的启用和禁用
- 吐血整理：人工智能、机器学习领域13个常见概念
- 未来的你，一定感谢现在拼命努力的自己