JavaScript实现打字项目

2020-04-18 22:55:43 阅读：265 来源： 互联网

标签：body oDiv 项目 JavaScript 打字 let background div document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小鱼打字</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        body {

            /*background-color: red;*/
            background-image: url("images/bg.jpg");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
        }
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .specter {
            width: 300px;
            height: 300px;
            background: url("images/yy.png") no-repeat;
            position: absolute;
        }
        .specter>span{
            position: absolute;
            left: 70px;
            top: 200px;
            font-size: 60px;
            font-weight: bold;
            text-shadow: 5px 5px 5px #3e437a;
        }
    </style>
</head>
<body>
    <img src="images/play.png" alt="">
    <audio src="media/bg.ogg" autoplay loop></audio>
    <!--<div class="specter"><span>m</span></div>-->
<script>
    let oImg = document.querySelector("img");
    let oAudio = document.querySelector("audio");

    oImg.onclick = function () {
        // 移除按钮
        oImg.parentNode.removeChild(oImg);
        // 播放bgm
        oAudio.play();
        // 只有当用户点击按钮时, 才会开始创建幽灵
        setInterval(function () {
            let s = new Specter();
            s.fly();
        }, 1000);
    };

    // 将幽灵封装成一个类
    class Specter {
        constructor() {
            // 1.创建div 并添加类名
            let oDiv = document.createElement("div");
            oDiv.style.top = "1000px";
            oDiv.style.left = Math.random()*1500 + "px";
            // 2.创建span 并设置内容
            let oSpan = document.createElement("span");
            // oSpan.innerHTML = "M"
            // 随机生成字母
            let key = this.generateKey();
            oDiv.className = "specter " + key;

            oSpan.innerHTML = key;
            // 3.将span添加到div中
            oDiv.appendChild(oSpan);
            // 4.将div添加到body中
            document.body.appendChild(oDiv);
            //将oDiv设置为类的属性
            this.oDiv = oDiv;
        }

        boom() {
            // 删除幽灵
            document.body.removeChild(this.oDiv);
            // 删除定时器
            clearInterval(this.timer);
        }

        fly() {
            let offset = parseInt(this.oDiv.style.top);

            this.timer = setInterval(() => {
                offset = offset - 40;
                // 判断幽灵是否移出屏幕
                if (offset <= -300) {
                    this.boom();
                }
                this.oDiv.style.top = offset + "px";
            }, 200);
        }

        generateKey() {
            let num = Math.floor(Math.random() * (90 - 65 + 1)) + 65;
            return String.fromCharCode(num);
        }

    }

    document.body.onkeydown = function (event) {
        let key = event.key.toUpperCase();
        let oDiv = document.querySelector("." + key);
        document.body.removeChild(oDiv);
    };


    /*
    // 产生指定范围的随机值
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }*/
</script>
</body>
</html>

标签：body,oDiv,项目,JavaScript,打字,let,background,div,document
来源： https://www.cnblogs.com/TomHe789/p/12728789.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript实现打字项目