马黑黑 发表于 2024-1-4 17:42

张斯函 ：半城夏味

本帖最后由 马黑黑 于 2024-1-4 17:44 编辑 <br /><br /><style>
#papa { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/bixw.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa:hover #wrap { opacity: .75; }
#papa:hover #vid { mix-blend-mode: screen; }
#wrap { position: absolute; left: 20px; bottom: 20px; padding: 10px; border: 1px solid tan; border-radius: 10px; background: #eee; box-shadow: 2px 2px 6px gray; font-size: 15px; opacity: 0.2; transition: opacity 1s; }
#wrap::before { position: absolute; left: 6px; top: 4px; content: '半城夏味'; }
#calcMsg { margin: 24px 0 8px 0; padding: 4px; height: 20px; background: white; font: normal 14px/20px sans-serif; overflow: hidden; }
#cBox { max-width: 126px; display: flex; gap: 2px; flex-wrap: wrap; }
#cBox span { display: grid; place-items: center; width: 30px; height: 30px; background: lightblue; border-radius: 50%; }
#btnPlay { margin: 10px 0 0 0; padding: 2px; text-align: center; cursor: pointer; border-radius: 10px; background: lightblue; }
#btnPlay:hover { color: red; }
#vid { position: absolute; width: 1180px; height: 640px; mix-blend-mode: darken; object-fit: cover; pointer-events: none; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=547580245" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b51b120c01fa.mp4" loop muted></video>
        <div id="wrap">
                <div id="calcMsg"></div>
                <div id="cBox"></div>
                <div id="btnPlay">暂停&播放</div>
        </div>
</div>

<script>
{
let charIdx = 0, equation = '', btns = [], timer;
let spans = ['0','1','2','3','4','5','6','7','8','9','.','=','+','-','*','/'];
spans.forEach((span,key) => {
        let sp = document.createElement('span');
        sp.innerText = span;
        cBox.appendChild(sp);
        btns.push(sp);
});
let mkequ = () => {
        let operators = ['+','-','*','/'];
        var n1 = Math.floor(Math.random() * 1000),
                n2 = Math.floor(Math.random() * 1000),
                operate = operators;
        let res = parseFloat(eval(`${n1}${operate}${n2}`));
        if(res.toString().indexOf('.') != -1) res = res.toFixed(2);
        return `${n1}${operate}${n2}=${res}`;
};
equation = mkequ();
let update = () => {
        let charNow = equation.charAt(charIdx);
        calcMsg.innerText += charNow;
        for(let j = 0; j < btns.length; j ++) {
                if(btns.innerText === charNow) btns.style.background = 'pink';
        }
        charIdx ++;
        if(charIdx > equation.length) {
                calcMsg.innerText = '';
                charIdx = 0;
                equation = mkequ();
                btns.forEach(elm => elm.style.background = 'lightblue');
        }
        timer = setTimeout(update,300);
};
let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), timer = clearTimeout(timer), btnPlay.innerText = '播放', vid.pause()) :
                (papa.style.setProperty('--state','running'), timer = setTimeout(update,300), btnPlay.innerText = '暂停', vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
}
</script>

马黑黑 发表于 2024-1-4 17:45

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/bixw.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa:hover #wrap { opacity: .75; }
#papa:hover #vid { mix-blend-mode: screen; }
#wrap { position: absolute; left: 20px; bottom: 20px; padding: 10px; border: 1px solid tan; border-radius: 10px; background: #eee; box-shadow: 2px 2px 6px gray; font-size: 15px; opacity: 0.2; transition: opacity 1s; }
#wrap::before { position: absolute; left: 6px; top: 4px; content: '半城夏味'; }
#calcMsg { margin: 24px 0 8px 0; padding: 4px; height: 20px; background: white; font: normal 14px/20px sans-serif; overflow: hidden; }
#cBox { max-width: 126px; display: flex; gap: 2px; flex-wrap: wrap; }
#cBox span { display: grid; place-items: center; width: 30px; height: 30px; background: lightblue; border-radius: 50%; }
#btnPlay { margin: 10px 0 0 0; padding: 2px; text-align: center; cursor: pointer; border-radius: 10px; background: lightblue; }
#btnPlay:hover { color: red; }
#vid { position: absolute; width: 1180px; height: 640px; mix-blend-mode: darken; object-fit: cover; pointer-events: none; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=547580245" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b51b120c01fa.mp4" loop muted></video>
        <div id="wrap">
                <div id="calcMsg"></div>
                <div id="cBox"></div>
                <div id="btnPlay">暂停&播放</div>
        </div>
</div>

<script>
let charIdx = 0, equation = '', btns = [], timer;
let spans = ['0','1','2','3','4','5','6','7','8','9','.','=','+','-','*','/'];
spans.forEach((span,key) => {
        let sp = document.createElement('span');
        sp.innerText = span;
        cBox.appendChild(sp);
        btns.push(sp);
});
let mkequ = () => {
        let operators = ['+','-','*','/'];
        var n1 = Math.floor(Math.random() * 1000),
                n2 = Math.floor(Math.random() * 1000),
                operate = operators;
        let res = parseFloat(eval(`${n1}${operate}${n2}`));
        if(res.toString().indexOf('.') != -1) res = res.toFixed(2);
        return `${n1}${operate}${n2}=${res}`;
};
equation = mkequ();
let update = () => {
        let charNow = equation.charAt(charIdx);
        calcMsg.innerText += charNow;
        for(let j = 0; j < btns.length; j ++) {
                if(btns.innerText === charNow) btns.style.background = 'pink';
        }
        charIdx ++;
        if(charIdx > equation.length) {
                calcMsg.innerText = '';
                charIdx = 0;
                equation = mkequ();
                btns.forEach(elm => elm.style.background = 'lightblue');
        }
        timer = setTimeout(update,300);
};
let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), timer = clearTimeout(timer), btnPlay.innerText = '播放', vid.pause()) :
                (papa.style.setProperty('--state','running'), timer = setTimeout(update,300), btnPlay.innerText = '暂停', vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-1-4 18:34

哈哈，真把这计算机用上了呢，有趣{:4_187:}

红影 发表于 2024-1-4 18:36

视频和背景的吻合度非常好，音乐也和动态计算器十分相配。欣赏黑黑好帖{:4_187:}

非常开心 发表于 2024-1-4 18:44

有点弹钢琴的意思{:4_189:}

红影 发表于 2024-1-4 18:47

这个鼠标移开竟然还“关灯”啊{:4_173:}

马黑黑 发表于 2024-1-4 19:08

红影 发表于 2024-1-4 18:47
这个鼠标移开竟然还“关灯”啊

省点电，低碳生活

马黑黑 发表于 2024-1-4 19:08

红影 发表于 2024-1-4 18:34
哈哈，真把这计算机用上了呢，有趣

玩玩

马黑黑 发表于 2024-1-4 19:09

非常开心 发表于 2024-1-4 18:44
有点弹钢琴的意思

其实是模拟计算器的音乐。每一台计算器，除非太低端，都会有音乐，比八音盒音乐品质好一些。

马黑黑 发表于 2024-1-4 19:09

红影 发表于 2024-1-4 18:36
视频和背景的吻合度非常好，音乐也和动态计算器十分相配。欣赏黑黑好帖

谢谢

红影 发表于 2024-1-4 19:50

马黑黑 发表于 2024-1-4 19:08
省点电，低碳生活

哈哈，这个说法太有趣了{:4_170:}

红影 发表于 2024-1-4 19:52

马黑黑 发表于 2024-1-4 19:08
玩玩

这音乐这场景都和计算器很相配呢{:4_187:}

红影 发表于 2024-1-4 19:52

马黑黑 发表于 2024-1-4 19:09
谢谢

用到哪个数字就变色了，这个也很别致{:4_187:}

千羽 发表于 2024-1-4 20:29

这景色挺美的，音乐也很好{:4_187:}

千羽 发表于 2024-1-4 20:31

画面有明暗两种色吗？我看到是色调明暗交替的……{:4_187:}

马黑黑 发表于 2024-1-4 20:48

千羽 发表于 2024-1-4 20:31
画面有明暗两种色吗？我看到是色调明暗交替的……

没那么多色。滤镜效果。

马黑黑 发表于 2024-1-4 20:48

红影 发表于 2024-1-4 19:50
哈哈，这个说法太有趣了

{:4_169:}

马黑黑 发表于 2024-1-4 20:48

千羽 发表于 2024-1-4 20:29
这景色挺美的，音乐也很好

谢谢

马黑黑 发表于 2024-1-4 20:49

红影 发表于 2024-1-4 19:52
用到哪个数字就变色了，这个也很别致

这个是可以建立关联的

马黑黑 发表于 2024-1-4 20:49

红影 发表于 2024-1-4 19:52
这音乐这场景都和计算器很相配呢

还不错
页: [1] 2 3 4
查看完整版本: 张斯函 ：半城夏味