1.打字游戏
<!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>Document</title>
<style>
span {
width: 20px;
height: 20px;
background: red;
text-align: center;
line-height: 20px;
border-radius: 50%;
color: #ffffff;
font-weight: 700;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
</body>
<div>得分：
<b></b>
</div>
<!--<span></span> -->
</html>
<script>
var str = 'qwertyuiopasdfghjklzxcvbnm0123456789';
var s = [];
var timer;
var score = 0;
var span = document.createElement('span');
function createSpan() {
document.body.appendChild(span);
var index = Math.floor(Math.random() * str.length);
s = str[index];
span.innerText = s;
var x = Math.random() * (document.documentElement.clientWidth - span.offsetWidth);
span.style.left = x + 'px'
move()
}
createSpan();
function move() {
var num = 0;
timer = setInterval(function () {
num += 3
if (num >= document.documentElement.clientHeight - span.clientHeight - 10) {
document.body.removeChild(span);
clearInterval(timer);
createSpan()
}
span.style.top = num + 'px'
}, 10);
}
document.onkeypress = function (e) {
e = e || window.event;
if (e.keyCode == s.charCodeAt(0)) {
clearInterval(timer);
createSpan()
score++;
document.querySelector('b').innerText = score;
}
}
</script>
2.元素拖拽
<!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>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script>
var div = document.querySelector('div');
div.onmousedown = function (e) {
e = e || window.event;
//获取鼠标在div元素中的位置
var offX = e.offsetX;
var offY = e.offsetY;
document.onmousemove = function (e) {
e = e || window.event;
//获取鼠标在浏览器窗口中的实位置
var mouseX = e.clientX;
var mouseY = e.clientY;
var y = mouseY - offY;
var x = mouseX - offX;
if (x <= 0) {
x = 0;
}
if (y <= 0) {
y = 0;
}
var maxWidth = document.documentElement.clientWidth - div.offsetWidth;
var maxHeight = document.documentElement.clientHeight - div.offsetHeight;
if (x >= maxWidth) {
x = maxWidth
};
if (y >= maxHeight) {
y = maxHeight
}
div.style.top = y + 'px';
div.style.left = x + 'px';
}/* */
}
div.onmouseup = function (e) {
document.onmousemove = ''
}
</script>
3.进度条设置
<!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>Document</title>
<style>
.box1 {
width: 500px;
height: 50px;
position: relative;
top: 100px;
left: 30%
}
.box2 {
width: 420px;
height: 50px;
border: 1px solid;
background: #cccccc;
float: left
}
.box3 {
width: 0;
height: 50px;
background: pink;
}
span {
display: block;
width: 50px;
height: 50px;
font-size: 40px;
float: left
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
<span></span>
</div>
</body>
</html>
<script>
var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var box3 = document.querySelector('.box3')
var span=document.querySelector('span')
box2.onmousedown = function (e) {
e = e || widon.event;
box2.onmousemove = function (e) {
var x = e.offsetX
box3.style.width = x + 'px'
span.innerText=Math.floor(x/box2.clientWidth*100)+'%'
}
}
box2.onmouseup = function () {
box2.onmousemove = ''
}
</script>
