JavaScript-事件和事件对象、实现键盘打字小游戏
JavaScript-事件和事件对象
一．事件介绍
事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。
JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型。
1.鼠标事件，页面所有元素都可触发
click：当用户单击鼠标按钮或按下回车键时触发。
input.onclick = function () {
alert('Mumu');
};
dblclick：当用户双击主鼠标按钮时触发。
input.ondblclick = function () {
alert('Mumu');
};
mousedown：当用户按下了鼠标还未弹起时触发。
input.onmousedown = function () {
alert('Mumu');
};
mouseup：当用户释放鼠标按钮时触发。
input.onmouseup = function () {
alert('Mumu');
};
mouseover：当鼠标移到某个元素上方时触发。
input.onmouseover = function () {
alert('Mumu');
};
mouseout：当鼠标移出某个元素上方时触发。
input.onmouseout = function () {
alert('Mumu');
};
mousemove：当鼠标指针在元素上移动时触发。
input.onmousemove = function () {
alert('Mumu');
};
2.键盘事件
keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。
onkeydown = function () {
alert('Mumu');
};
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发。
onkeypress = function () {
alert('Mumu');
};
keyup：当用户释放键盘上的键触发。
onkeyup = function () {
alert('Mumu');
};
3.HTML事件
load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发。
window.onload = function () {
alert('Mumu');
};
unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。
window.onunload = function () {
alert('Mumu');
};
select：当用户选择文本框(input或textarea)中的一个或多个字符触发。
input.onselect = function () {
alert('Mumu');
};
change：当文本框(input或textarea)内容改变且失去焦点后触发。
input.onchange = function () {
alert('Mumu');
};
focus：当页面或者元素获得焦点时在window及相关元素上面触发。
input.onfocus = function () {
alert('Mumu');
};
blur：当页面或元素失去焦点时在window及相关元素上触发。
input.onblur = function () {
alert('Mumu');
};
submit：当用户点击提交按钮在元素上触发。
form.onsubmit = function () {
alert('Mumu');
};
reset：当用户点击重置按钮在元素上触发。
form.onreset= function () {
alert('Mumu');
};
resize：当窗口或框架的大小变化时在window或框架上触发。
window.onresize = function () {
alert('Mumu');
};
scroll：当用户滚动带滚动条的元素时触发。
window.onscroll = function () {
alert('Mumu');
};
var input = document.querySelector("input");
var showcode = document.createElement("div");
showcode.style.width = "200px";
showcode.style.height = "200px";
showcode.style.backdroundColor = 'rgba(0,0,0,0.6)';
showcode.style.position = "fixed";
showcode.style.left = "200px";
showcode.style.top = "200px";
document.body.appendChild(showcode);
input.onkeydown =function(event){
showcode.innerHTML=event.key;
}
二、实现打字小游戏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
<link rel="stylesheet" href="../css/tanchuang.css" />
<script src="../js文件/popwindows.js">script>
head>
<style>
#showCode {
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
width: 200px;
height: 200px;
position: fixed;
left: 200px;
top: 200px;
line-height: 200px;
font-size: 40px;
color: aliceblue;
}
button {
width: 80px;
height: 30px;
background-color: orange;
border: none;
}
button:hover {
background-color: rgb(134, 202, 247);
}
style>
<body>
<div id="showCode">div>
<button >开始button>
<script>
/*
键盘落下事件onkeydown
键盘按下事件onkeypress
键盘弹起事件onkeyup
*/
var score = 0;
var startbtn = document.querySelector("button");
var showcode = document.querySelector("div");
/* 定义一个方法,随机生成一个大写字母，将这个字符的内容显示在div上面*/
function randomCode() {
var randomNum = 97 + parseInt(Math.random() * 26);
var randomStr = String.fromCharCode(randomNum);
var ucStr = randomStr.toUpperCase();
showcode.innerHTML = ucStr;
}
/* 监听键盘输入事件获取输入的值，将值和当前内容进行比较 */
document.body.onkeypress = function(event) {
var keyCode = event.key.toUpperCase();
var content = showcode.innerHTML;
if (keyCode == content) {
console.log("打字正确，得分加1");
score++;
randomCode();
}
};
var fn10 = function() {
Alert({
title: "打字速度",
content: "您每分钟能敲" + score + "单词",
confirmDivfn: function() {
score = 0;
showcode.innerHTML = "";
btnListen();
},
cancelfn: function() {
showcode.innerHTML = "游戏结束
";
startbtn.style.display = "none";
clearTimeout();
}
});
};
function btnListen() {
startbtn.onclick = function() {
var a = showcode.innerHTML;
if (a == "") {
randomCode();
setTimeout(fn10, 10000);
clearTimeout();
}
};
}
btnListen();
/* setTimeout 每间隔十秒钟调用一次fn10函数 十秒等于一万毫秒 */
script>
body>
html>
tanchuang.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.shade {
display: flex;
top: 0;
left: 0;
width: 100%;
height: 600px;
background-color: rgba(0, 0, 0, 0.5);
}
.shade .popwindows {
width: 400px;
height: 300px;
background-color: #f2f2f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.shade .popwindows .tltle {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
flex: 1;
border-bottom: 1px solid #bdb8b8;
}
.shade .popwindows .tltle .text {
flex: 1;
float: left;
padding-left: 10px;
font-family: "微软雅黑";
}
.shade .popwindows .tltle .exit {
width: 30px;
height: 30px;
background-image: url("../js学习/imag/cuohao.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 20px auto;
float: right;
margin-right: 10px;
}
.shade .popwindows .content {
width: 100%;
flex: 3;
line-height: 40px;
font-size: 13px;
margin-left: 10px;
font-family: '宋体';
}
.shade .popwindows .endbtn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex: 1;
border-top: 1px solid #bdb8b8;
}
.shade .popwindows .endbtn .btn{
width: 80px;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 15px;
background-color: #979797;
}
.shade .popwindows .endbtn .btn:nth-child(1){
margin-right: 10px;
}
.shade .popwindows .endbtn .btn:nth-child(2){
margin-right: 10px;
}
.shade .popwindows .endbtn .btn:hover{
background-color: #f68c4e;
}
popwindows.js
/*
var args = {
title:"温馨提示",
content:"是否添加一个页面生成一个蓝色div",
confirmDivfn:function(){
var a = document.createElement("div");
a.style.backgroundColor = "red";
a.style.width = "100px";
a.style.height = "100px";
body.appendChild(a);
},
cancelfn:function(){
body.removeChild(shade);
}
}
*/
function Alert(args) {
var shade = document.createElement("div");
shade.className = "shade";
shade.innerHTML =
`
确定
取消
`;
document.body.appendChild(shade);
var cancel = document.querySelector(".btn.cancel");
var confirmDiv = document.querySelector(".btn.confirm");
confirmDiv.onclick = function() {
/* 此处输入确认事件的内容*/
args.confirmDivfn();
document.body.removeChild(shade);
};
cancel.onclick = function() {
/* 此处输入取消事件的内容 */
args.cancelfn();
document.body.removeChild(shade);
};
};
