四海八荒 发表于 2021-11-1 21:30
想吃我给你点
吃这个容易糖分过量{:4_173:}
本帖最后由 加林森 于 2022-3-8 16:07 编辑 <br /><br />红影 发表于 2021-11-1 21:34
嗯，现在可以了。
是的，调整了一下。
<style>
#bigPa { position: relative; left:- 100px; width: 800px; height: 450px; background:#333 url('https://pic.imgdb.cn/item/6226becb5baa1a80abf300a2.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; top: 10px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
</div>
</div>
<script language="javascript">
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/03/07/55a90243d00b02a2e5aea58645feea52.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
</script>
加林森 发表于 2021-11-1 21:34
四海晚上好！
队长晚上好！
红影 发表于 2021-11-1 21:35
吃这个容易糖分过量
主要还是吃的口感。
不然水果，点心，再高的含糖量也不如直接吃蔗糖。蔗糖多便宜！
好看，影收礼胖胖{:4_189:}
四海八荒 发表于 2021-11-1 21:39
主要还是吃的口感。
不然水果，点心，再高的含糖量也不如直接吃蔗糖。蔗糖多便宜！
是的，甜点通常是精致的，少量的，让人开心的，适合浅尝辄止。
绿叶清舟 发表于 2021-11-1 21:42
好看，影收礼胖胖
哈哈，偶尔吃点无妨的{:4_173:}
红影 发表于 2021-11-1 21:49
哈哈，偶尔吃点无妨的
不能多吃了，反式脂肪酸太高的 不好
四海八荒 发表于 2021-11-1 21:37
队长晚上好！
晚上好，四海！
绿叶清舟 发表于 2021-11-1 21:42
好看，影收礼胖胖
哈哈哈哈，你也吃点吧。
绿叶清舟 发表于 2021-11-1 21:53
不能多吃了，反式脂肪酸太高的 不好
是啊，会得那个叫什么病的，我忘记了。糖尿病还是痛风的。
红影 发表于 2021-11-1 21:49
是的，甜点通常是精致的，少量的，让人开心的，适合浅尝辄止。
亲爱的我最喜欢吃甜的
红影 发表于 2021-11-1 21:58
是啊，会得那个叫什么病的，我忘记了。糖尿病还是痛风的。
二个都有可能的了
加林森 发表于 2021-11-1 21:57
哈哈哈哈，你也吃点吧。
俺看影吃{:4_189:}
红影 发表于 2021-11-1 21:58
是啊，会得那个叫什么病的，我忘记了。糖尿病还是痛风的。
很多病不是吃的太多，是自身消化系统的问题，例如高血糖，糖尿病的起因都不是吃糖太多，痛风也不是喝啤酒吃动物内脏（嘌呤）太多。
绿叶清舟 发表于 2021-11-1 22:02
俺看影吃
哈哈，你难道不想吃点啊？
小辣椒 发表于 2021-11-1 21:19
制作可以吃的就是好看，可惜我很懒，不想谢，眼睛过过瘾
也挺好的
加林森 发表于 2021-11-1 20:17
你皮痒了就直接告诉我。
又动气了
马黑黑 发表于 2021-11-1 22:25
又动气了
哪有这么容易啊
加林森 发表于 2021-11-1 22:43
哪有这么容易啊
不是就好