键盘事件的运用

通过ArrowUp和ArrowDown实现气球的放大和缩小，当气球的大小达到某个阀值的时候显示爆炸效果。

<!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>气球</title>
    <style>
        * {
            margin: 0;
        }
        p {
            font-size: 2em;
            position: absolute;
            left: 40%;
            top: 10%;
        }
    </style>
</head>
<body>
    <p>🎈</p>
    <script>
        window.addEventListener('keydown', event => {
            let bollan = document.querySelector('p');
            let old = window.getComputedStyle(bollan, null).getPropertyValue('font-size');
            let regex = /^\d+/g;
            let origin = parseInt(regex.exec(old));
            if (origin >= 200) {
                // 爆炸
                let boom = document.createElement('p');
                bollan.remove();
                boom.textContent = '💥';
                boom.style.fontSize = '300px';
                document.body.appendChild(boom);
            }
            event.preventDefault();
            switch (event.key) {
                case 'ArrowUp':
                    bollan.style.fontSize = (origin+30*0.1)+'px';
                    break;
                case 'ArrowDown':
                    bollan.style.fontSize = (origin-30*0.1)+'px';
                    break;
            }
        });
    </script>
</body>
</html>

 

posted @ 2019-01-11 10:55  ranwuer  阅读(175)  评论(0)  编辑  收藏  举报