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;
? ? ? ? //獲取鼠標(biāo)在div元素中的位置
? ? ? ? var offX = e.offsetX;
? ? ? ? var offY = e.offsetY;
? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? ? e = e || window.event;
? ? ? ? ? ? //獲取鼠標(biāo)在瀏覽器窗口中的實(shí)位置
? ? ? ? ? ? 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.進(jìn)度條設(shè)置
<!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>
