code 练习系列，用于回顾及复习2

最新推荐文章于 2024-02-04 11:13:17 发布

N_ora

最新推荐文章于 2024-02-04 11:13:17 发布

阅读量198

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_33359745/article/details/106760012

版权

1.加载小圆球：

菜鸟版：

    // window.onload = function () {
    //       var list = [];
    //       var opacity = 1;
    //       var r = 10;
    //       for (var angle = 0; angle < 300; angle += 30) {
    //             var div = document.createElement('div');
    //             div.style.width = 2 * r + 'px';
    //             div.style.height = 2 * r + 'px';
    //             div.style.borderRadius = r + 'px';
    //             div.style.backgroundColor = 'red';
    //             div.style.opacity = opacity;
    //             div.style.position = 'absolute';
    //             div.angle = angle;
    //             list.push(div);
    //             document.body.appendChild(div);
    //             opacity -= 0.1;
    //       }

    //       var id = setInterval(round, 16)

    //       function round() {
    //             for (var i = 0; i < list.length; i++) {
    //                   // console.log(div.offsetLeft, div.offsetTop);
    //                   list[i].style.left = document.documentElement.clientWidth / 2 + Math.sin(Math.PI / 180 * list[i].angle) * 4 * r + 'px';
    //                   list[i].style.top = document.documentElement.clientHeight / 2 + Math.cos(Math.PI / 180 * list[i].angle) * 4 * r + 'px';
    //                   if (list[i].angle < 360) {
    //                         list[i].angle -= 4;
    //                   } else {
    //                         list[i].angle = 0;
    //                   }
    //             }
    //       }
    // }

正式版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圆周运动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            /* overflow: hidden; */
        }
        div {
            position: absolute;
            background-color: lightskyblue;
            width: 15px;
            height: 15px;
            border-radius: 10px;
        }
    </style>
    <script src="./index.js"></script>
</head>
<body>
<script>
    window.onload = function () {
        var ball
        var speed = 3
        var arr = []
        var r = 30
        var time = 6
        // var i = 0;
        init()

        function init() {
        // 初始化函数，调用动画
            animation()
        }
	// 创建球
        function createBall(alpha) {
            ball = document.createElement('div')
            ball.className = 'ball'
            ball.angle = 0
            ball.style.opacity = alpha
            document.body.appendChild(ball)
            arr.push(ball)
        }
	
        function animation() {
            requestAnimationFrame(animation)
            for (var i = 0; i < arr.length; i++) {
                update(arr[i])
            }
            time--
            // 每个160毫秒调用一次update 并且生成一个新的球
            if (time > 0 || arr.length > 10) return

            createBall(1 - arr.length * 0.08)
            time = 6
            // update(arr[i]);
        }

        function update(elem) {
            elem.angle += 5
            if (elem.angle === 360) elem.angle = 0
            var speedX = Math.sin((elem.angle * Math.PI) / 180) * r
            var speedY = Math.cos((elem.angle * Math.PI) / 180) * r

            // 获取页面的中心点 
            elem.style.left =
                (document.documentElement.clientWidth - elem.offsetWidth) / 2 +
                speedX +
                'px'
            elem.style.top =
                (document.documentElement.clientHeight - elem.offsetHeight) / 2 +
                speedY +
                'px'
        }
    }
</script>
</body>
</html>

N_ora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
code 练习系列，用于回顾及复习2

1.加载小圆球：菜鸟版： // window.onload = function () { // var list = []; // var opacity = 1; // var r = 10; // for (var angle = 0; angle < 300; angle += 30) { // var div = document.createElement('div')
复制链接

扫一扫