论坛 › 欢乐水吧 › 漫途

马黑黑 发表于 2023-7-15 18:35

漫途

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/mjtu.webp') no-repeat center/cover;
        box-shadow: 0 0 8px 0 #000;
}
#pan {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 50px);
        width: 120px;
        height: 120px;
        background: lightgreen;
        border-radius: 50%;
        color: lightgreen;
        font: bold 40px/120px sans-serif;
        text-align: center;
        text-shadow: 1px 1px 1px black;
        cursor: pointer;
        animation: borderChg 1s infinite alternate linear var(--state);
}
@keyframes borderChg {
        from { box-shadow: 0 0 10px black inset, 0 0 20px green; }
        to { box-shadow: 0 0 30px black inset, 0 0 30px black; }
}
</style>

<div id="mydiv">
        <div id="pan">漫途</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130912" autoplay="autoplay" loop="loop"></audio>

<script>

(function() {

let total = 50, canMove = true;

class Lizi {
        constructor(pa) {
                this.pa = pa;
                this.ele = document.createElement('span');
                this.prop = {
                        width: 20,
                        height: 20,
                        left: 20,
                        top: 20,
                        a: 1,
                        step: .2,
                        bgstr: 'purple'
                };
        }
        create() {
                this.ele.style.cssText = `
                        position: absolute;
                        width: ${this.prop.width}px;
                        height: ${this.prop.height}px;
                        left: ${this.prop.left}px;
                        top: ${this.prop.top}px;
                        border-radius: 50%;
                        background: ${this.prop.bgstr};
                `;
                this.pa.appendChild(this.ele);
                this.circle();
        }
        circle() {
                if(canMove) {
                        this.prop.a = this.prop.a + this.prop.step;
                        this.prop.x = this.pa.offsetWidth / 2 + (this.pa.offsetWidth / 2 - this.prop.width / 2) * Math.cos(this.prop.a * Math.PI / 180) - this.prop.width * 0.5;
                        this.prop.y = this.pa.offsetHeight / 2 + (this.pa.offsetHeight / 2 - this.prop.height / 2) * Math.sin(this.prop.a * Math.PI / 180)- this.prop.height * 0.5;
                        this.ele.style.cssText += `
                                left: ${this.prop.x}px;
                                top: ${this.prop.y}px;
                        `;
                }
                requestAnimationFrame(this.circle.bind(this));
        }
}

Array.from({length: total}).forEach((item,key) => {
        item = new Lizi(mydiv);
        item.prop.a = 360 / total * key;
        item.prop.bgstr = `#${Math.random().toString(16).substr(-6)}`;
        item.create();
});

let mState = () =>aud.paused ? (mydiv.style.setProperty('--state','paused'), canMove = false) : (mydiv.style.setProperty('--state','running'), canMove = true);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
pan.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

马黑黑 发表于 2023-7-15 18:36

代码
<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/mjtu.webp') no-repeat center/cover;
        box-shadow: 0 0 8px 0 #000;
}
#pan {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 50px);
        width: 120px;
        height: 120px;
        background: lightgreen;
        border-radius: 50%;
        color: lightgreen;
        font: bold 40px/120px sans-serif;
        text-align: center;
        text-shadow: 1px 1px 1px black;
        cursor: pointer;
        animation: borderChg 1s infinite alternate linear var(--state);
}
@keyframes borderChg {
        from { box-shadow: 0 0 10px black inset, 0 0 20px green; }
        to { box-shadow: 0 0 30px black inset, 0 0 30px black; }
}
</style>

<div id="mydiv">
        <div id="pan">漫途</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130912" autoplay="autoplay" loop="loop"></audio>

<script>

let total = 50, canMove = true;

class Lizi {
        constructor(pa) {
                this.pa = pa;
                this.ele = document.createElement('span');
                this.prop = {
                        width: 20,
                        height: 20,
                        left: 20,
                        top: 20,
                        a: 1,
                        step: .2,
                        bgstr: 'purple'
                };
        }
        create() {
                this.ele.style.cssText = `
                        position: absolute;
                        width: ${this.prop.width}px;
                        height: ${this.prop.height}px;
                        left: ${this.prop.left}px;
                        top: ${this.prop.top}px;
                        border-radius: 50%;
                        background: ${this.prop.bgstr};
                `;
                this.pa.appendChild(this.ele);
                this.circle();
        }
        circle() {
                if(canMove) {
                        this.prop.a = this.prop.a + this.prop.step;
                        this.prop.x = this.pa.offsetWidth / 2 + (this.pa.offsetWidth / 2 - this.prop.width / 2) * Math.cos(this.prop.a * Math.PI / 180) - this.prop.width * 0.5;
                        this.prop.y = this.pa.offsetHeight / 2 + (this.pa.offsetHeight / 2 - this.prop.height / 2) * Math.sin(this.prop.a * Math.PI / 180)- this.prop.height * 0.5;
                        this.ele.style.cssText += `
                                left: ${this.prop.x}px;
                                top: ${this.prop.y}px;
                        `;
                }
                requestAnimationFrame(this.circle.bind(this));
        }
}

Array.from({length: total}).forEach((item,key) => {
        item = new Lizi(mydiv);
        item.prop.a = 360 / total * key;
        item.prop.bgstr = `#${Math.random().toString(16).substr(-6)}`;
        item.create();
});

let mState = () =>aud.paused ? (mydiv.style.setProperty('--state','paused'), canMove = false) : (mydiv.style.setProperty('--state','running'), canMove = true);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
pan.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

樵歌 发表于 2023-7-15 19:43

若大一个祭坛，那圣女在接受古老的传承，还是在作法要收纳天地{:4_189:}

一斛珠 发表于 2023-7-15 20:17

樵歌 发表于 2023-7-15 19:43
若大一个祭坛，那圣女在接受古老的传承，还是在作法要收纳天地

真有想象力{:4_172:}

红影 发表于 2023-7-15 20:20

this.prop.a = this.prop.a + this.prop.step;和前面那个教学帖子不一样，不是按1度步进的，怪不得转得这么慢了{:4_204:}

红影 发表于 2023-7-15 20:21

这个用判断是否大于360了么？

红影 发表于 2023-7-15 20:24

item.prop.a = 360 / total * key;里面的key没看明白，就是让50个球球均匀分布吧。估计前面的课程没学好{:4_173:}

红影 发表于 2023-7-15 20:24

黑黑又带来新玩法，很赞{:4_199:}

马黑黑 发表于 2023-7-15 20:41

樵歌 发表于 2023-7-15 19:43
若大一个祭坛，那圣女在接受古老的传承，还是在作法要收纳天地

想的真多

马黑黑 发表于 2023-7-15 20:44

红影 发表于 2023-7-15 20:24
item.prop.a = 360 / total * key;里面的key没看明白，就是让50个球球均匀分布吧。估计前面的课程没学好{:4 ...
数组.forEach( (item,key) => {...}); 中，变量 item 指数组元素，变量 key 指数组下标。key 在这里等同于以下 for 语句 中的 k ：

for(let k = 0; k < 数组.length; k ++) {
    //...
}

马黑黑 发表于 2023-7-15 20:45

红影 发表于 2023-7-15 20:24
黑黑又带来新玩法，很赞

{:4_180:}

马黑黑 发表于 2023-7-15 20:46

红影 发表于 2023-7-15 20:21
这个用判断是否大于360了么？

其实也不必吧。前面的示例有这个判断，让它复位回到0，以免变量 a 的值很大很大。不过这基本是多余的，管它呢

马黑黑 发表于 2023-7-15 20:47

红影 发表于 2023-7-15 20:20
this.prop.a = this.prop.a + this.prop.step;和前面那个教学帖子不一样，不是按1度步进的，怪不得转得这么 ...

路漫长，走慢点吧。反正，路虽远行必至。

马黑黑 发表于 2023-7-15 20:48

一斛珠 发表于 2023-7-15 20:17
真有想象力

{:4_181:}

红影 发表于 2023-7-15 21:17

马黑黑 发表于 2023-7-15 20:44
数组.forEach( (item,key) => {...}); 中，变量 item 指数组元素，变量 key 指数组下标。key 在这里等同 ...

原来可以这样写，嗯嗯，现在明白了{:4_199:}

红影 发表于 2023-7-15 21:18

马黑黑 发表于 2023-7-15 20:45


这个是前面那个教学帖子的实例呢，而且有新内容{:4_199:}

红影 发表于 2023-7-15 21:19

马黑黑 发表于 2023-7-15 20:46
其实也不必吧。前面的示例有这个判断，让它复位回到0，以免变量 a 的值很大很大。不过这基本是多余的，管 ...

是的，超过360等于减去360的值，只要不是一直开着这个帖子，实际很难超过的。

红影 发表于 2023-7-15 21:21

马黑黑 发表于 2023-7-15 20:47
路漫长，走慢点吧。反正，路虽远行必至。

现在更加清楚转动速度和步进度数的关系了，正好前面试验了一下，这里又看到这个。{:4_204:}

马黑黑 发表于 2023-7-15 21:33

红影 发表于 2023-7-15 21:21
现在更加清楚转动速度和步进度数的关系了，正好前面试验了一下，这里又看到这个。

研究一下就有收获

马黑黑 发表于 2023-7-15 21:35

红影 发表于 2023-7-15 21:19
是的，超过360等于减去360的值，只要不是一直开着这个帖子，实际很难超过的。

JS整数安全数值是 ±9007199254740991，浮点数更大，够用的

查看完整版本: 漫途