事件: Event
获取Event对象
window.event
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(event){
console.log(window.event);
console.log(event);
console.log(this);
}
btn.ondblclick = function(){
console.log(window.event);
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>
事件冒泡
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: orange;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" />
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
var btn = document.getElementById("btn");
box.onclick = function(){
console.log("box被点击了");
}
btn.onclick = function(){
console.log("按钮被点击了");
window.event.stopPropagation();
}
</script>
</html>
你画我猜小游戏
登陆页面
<!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/bg.gif);
background-size: 50% 50%;
position: relative;
}
#inner{
width: 400px;
height: 260px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -130px;
border-radius: 20px;
}
#topic{
width: 80%;
height: 40px;
margin: 10px auto;
margin-bottom: 5px;
font-family: "楷体";
font-size: 28px;
color: white;
text-align: center;
line-height: 40px;
font-weight: 900;
}
#username{
margin-top: 30px;
margin-bottom: 10px;
}
#username, #password{
width: 90%;
height: 40px;
margin-left: 5%;
border: 1px solid white;
border-radius: 10px;
box-sizing: border-box;
position: relative;
padding-left: 3px;
}
#uname, #pword{
display: inline-block;
color: white;
font-size: 16px;
width: 12%;
height: 40px;
line-height: 36px;
}
#uname_input, #pword_input{
box-sizing: border-box;
width: 86%;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
background: transparent;
border-width: 0;
outline: none;
}
#info{
width: 90%;
margin-left: 5%;
margin-top: 10px;
text-align: right;
}
#forget_pword, #regist{
text-decoration: none;
}
#forget_pword:hover, #regist:hover{
color: orange;
}
#forget_pword, #line, #regist{
color: white;
font-size: 14px;
}
#btn{
width: 90%;
margin-left: 5%;
margin-top: 12px;
}
#login_btn{
width: 60%;
height: 30px;
margin-left: 20%;
border-radius: 10px;
color: white;
font-size: 16px;
background: orange;
border: none;
}
</style>
</head>
<body>
<div id="content">
<div id="inner">
<div id="topic">
你画我猜
</div>
<hr />
<div id="username">
<span id="uname">
账号:
</span>
<input type="text" id="uname_input" placeholder="请输入账号"/>
</div>
<div id="password">
<span id="pword">
密码:
</span>
<input type="password" id="pword_input" placeholder="请输入密码"/>
</div>
<div id="info">
<a href="#" id="forget_pword">
忘记密码
</a>
<span id="line">
|
</span>
<a href="#" id="regist">
注册
</a>
</div>
<div id="btn">
<input type="button" id="login_btn" value="登录" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById("login_btn").onclick = function(){
var unameInput = document.getElementsByTagName("input")[0];
var pwordInput = document.getElementsByTagName("input")[1];
var username = unameInput.value.trim();
var password = pwordInput.value.trim();
if(username.length <= 0){
alert("请输入账号");
return;
}
if(password.length <= 0){
alert("请输入密码");
return;
}
if(username == "admin" && password == "123456"){
var name = "管理员";
name = escape(name);
var sex = "男";
sex = escape(sex);
document.cookie = "name = " + name;
document.cookie = "sex = " + sex;
location.href = "main.html";
}else{
alert("账号密码不匹配");
}
}
</script>
</html>
主页面
<!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/bg.gif);
background-size: 50% 50%;
position: relative;
}
#top{
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.3);
text-align: right;
line-height: 50px;
position: relative;
}
#admin, #exit{
display: inline-block;
height: 30px;
border: 1px solid white;
color: white;
text-align: center;
line-height: 30px;
font-size: 16px;
border-radius: 10px;
margin-left: 30px;
}
#admin{
width: 70px;
}
#exit{
width: 106px;
margin-right: 10px;
cursor: pointer;
}
#admin:hover, #exit:hover{
color: orange;
border-color: orange;
}
#inner{
width: 600px;
height: 400px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
border-radius: 10px;
box-sizing: border-box;
position: relative;
}
#left{
width: 50%;
height: 400px;
box-sizing: border-box;
border-right: 1px solid white;
font-size: 120px;
color: white;
text-align: center;
line-height: 400px;
}
#right{
width: 50%;
height: 400px;
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
}
#inner_top{
width: 100%;
height: 30px;
margin-top: 10px;
font-size: 16px;
color: white;
line-height: 30px;
position: relative;
}
#span_left{
margin-left: 10px;
}
#span_right{
position: absolute;
right: 10px;
}
#topic{
height: 40px;
background: rgb(0,218,218);
margin-top: 30px;
font-size: 24px;
color: white;
text-align: center;
line-height: 40px;
}
#info{
height: 40px;
margin-top: 80px;
font-size: 24px;
color: white;
text-align: center;
line-height: 40px;
}
#start_btn{
width: 200px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 20px;
border-radius: 5px;
background: rgb(0,218,218);
border: none;
font-size: 16px;
color: white;
box-shadow: 0 0 10px white;
}
#start{
width: 200px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 20px;
display: none;
}
#btn_yes, #btn_no{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid white;
font-size: 16px;
text-align: center;
line-height: 30px;
color: white;
}
#btn_no{
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div id="content">
<div id="top">
<span id="admin">
xxx
</span>
<span id="exit">
退出登录
</span>
</div>
<div id="inner">
<div id="left">
180
</div>
<div id="right">
<div id="inner_top">
<span id="span_left">
第1题
</span>
<span id="span_right">
得分: 0
</span>
</div>
<div id="topic">
你画我猜
</div>
<div id="info">
你准备好了吗?
</div>
<input type="button" id="start_btn" value="开始游戏" />
<div id="start">
<span id="btn_yes">
√
</span>
<span id="btn_no">
×
</span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var info = document.cookie;
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 admin = document.getElementById("admin");
var exit = document.getElementById("exit");
var left = document.getElementById("left");
var problem = document.getElementById("span_left");
var scores = document.getElementById("span_right");
var info = document.getElementById("info");
var startBtn = document.getElementById("start_btn");
var start = document.getElementById("start");
var btnYes = document.getElementById("btn_yes");
var btnNo = document.getElementById("btn_no");
admin.innerText = name;
exit.onclick = () => {
document.cookie = "name = " + "";
document.cookie = "sex = " + "";
location.href = "login.html";
}
var num = 1;
var score = 0;
var task = null;
var timing = () => {
var time = parseInt(left.innerText);
time--;
if(time >= 0){
left.innerText = time + "";
}else{
alert("您的得分为: " + score + "分");
clearInterval(task);
location.reload();
}
}
var problems = ["鬼哭狼嚎","飞檐走壁","凤姐","犀利哥",
"三长二短","抱头鼠窜","鸡鸣狗盗",
"头破血流","坐井观天","眼高手低","目瞪口呆",
"胸无点墨",
"鸡飞狗跳","鼠目寸光","盲人摸象","画蛇添足",
"画龙点睛","抱头鼠窜","狗急跳墙","虎背熊腰",
"守株待兔","亡羊补牢","对牛弹琴","如鱼得水",
"打草惊蛇","打草惊蛇","走马观花","三头六臂"];
var nextProblem = () => {
var n = Math.floor(Math.random() * problems.length);
info.innerText = problems[n];
}
startBtn.onclick = () => {
startBtn.style.display = "none";
start.style.display = "block";
nextProblem();
task = setInterval(timing, 100);
}
btnYes.onclick = () => {
num++;
score++;
nextProblem();
problem.innerText = "第" + num + "题";
scores.innerText = "得分: " + score;
}
btnNo.onclick = () => {
num++;
nextProblem();
problem.innerText = "第" + num + "题";
}
</script>
</html>