计算器演算动画
<style>.papa {}
.papa > p {margin: 8px 0;}
.mama {height: fit-content; display: grid; grid-template-columns: 50px auto; grid-template-rows: 1fr; padding: 0; margin: 20px 0; background: #f9f9f9; box-shadow: 0 0 2px #000; position: relative;}
.hCode, .hLineNum {margin: 0;padding: 10px 4px;width: 100%;box-sizing: border-box;font-size: 14px;line-height: 16px;}
.hCode {overflow-x: auto; tab-size: 3;}
.hLineNum {border-right: 1px solid #ccc;text-align: right;color: gray;user-select: none;}
.stage {display: grid; place-items: center;}
#wrap { margin: 30px auto; position: relative; padding: 10px; width: fit-content; height: fit-content; border: 1px solid tan; border-radius: 10px; background: #eee; box-shadow: 2px 2px 6px gray; font-size: 16px; }
#wrap::before { position: absolute; left: 6px; top: 4px; content: '计算器'; }
#calcMsg { margin: 26px 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%; }
#okey { margin: 10px 0 0 0; padding: 2px; text-align: center; cursor: pointer; border-radius: 10px; background: lightblue; }
#okey:hover { color: red; }
</style>
<div id="wrap">
<div id="calcMsg"></div>
<div id="cBox"></div>
<div id="okey">开始</div>
</div>
<div class="papa">
<p>代码：</p>
<div class="mama">
<pre class="hLineNum"></pre>
<pre class="hCode"><style>
#wrap { margin: 30px auto; position: relative; padding: 10px; border: 1px solid tan; border-radius: 10px; background: #eee; box-shadow: 2px 2px 6px gray; font-size: 16px; }
#wrap::before { position: absolute; left: 6px; top: 4px; content: '计算器'; }
#calcMsg { margin: 26px 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%; }
#okey { margin: 10px 0 0 0; padding: 2px; text-align: center; cursor: pointer; border-radius: 10px; background: lightblue; }
#okey:hover { color: red; }
</style>
<div id="wrap">
<div id="calcMsg"></div>
<div id="cBox"></div>
<div id="okey">开始</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);
};
okey.onclick = () => {
timer = timer ? clearTimeout(timer) : setTimeout(update,500);
okey.innerText = timer ? '暂停' : '开始';
};
</script></pre>
</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);
};
okey.onclick = () => {
timer = timer ? clearTimeout(timer) : setTimeout(update,500);
okey.innerText = timer ? '暂停' : '开始';
};
let hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
});
</script>
这个示例，对计算而言，它是真计算，做简单的计算，不过，它的目的不是为了做计算。
开始/暂停按钮，是不是可以做音频播放器的按钮？ 不要小看这么个小小的东西，CSS布局设计中，用到了 flex 和 grid 两种新潮布局 点击开始，自动出来数字了，这个开始就是播放器按钮？不是计算用吗 黑黑越来越厉害了，播放器都用上计算机了{:4_189:} 等黑黑实例出来，小辣椒就套用玩{:4_205:} 这个厉害了，可以做随机运算呢，而且运算结果正确。
任它一直运行着，它就算天算地算天下啊{:4_173:} 马黑黑 发表于 2024-1-4 12:08
这个示例，对计算而言，它是真计算，做简单的计算，不过，它的目的不是为了做计算。
开始/暂停按钮，是 ...
这个想法有趣，比如一个献花的场景，随着音乐，有文字不停输出一朵花加上两朵花等于三朵，4朵花乘以5朵花等于20朵。。。肯定很让人惊奇{:4_173:} 红影 发表于 2024-1-4 16:15
这个想法有趣，比如一个献花的场景，随着音乐，有文字不停输出一朵花加上两朵花等于三朵，4朵花乘以5朵花 ...
等你的作品 红影 发表于 2024-1-4 16:12
这个厉害了，可以做随机运算呢，而且运算结果正确。
任它一直运行着，它就算天算地算天下啊
计算机算这个不是个事，随便算，不累 马黑黑 发表于 2024-1-4 17:30
等你的作品
我做不出来，我只会套用啊{:4_189:} 马黑黑 发表于 2024-1-4 17:31
计算机算这个不是个事，随便算，不累
是啊，要是换人去算，会累趴下{:4_173:} 红影 发表于 2024-1-4 19:30
是啊，要是换人去算，会累趴下
人的精力有限 红影 发表于 2024-1-4 19:29
我做不出来，我只会套用啊
做做就会 马黑黑 发表于 2024-1-4 20:57
人的精力有限
主要是构成不一样，功能也不一样{:4_173:} 马黑黑 发表于 2024-1-4 20:57
做做就会
没那本事{:4_173:} 红影 发表于 2024-1-4 22:09
没那本事
本事是做出来的 红影 发表于 2024-1-4 22:06
主要是构成不一样，功能也不一样
嗯，有的人是用特殊材料做成的 马黑黑 发表于 2024-1-5 13:09
嗯，有的人是用特殊材料做成的
这样的人凤毛麟角，而且就算有，可能也干不过计算机，因为计算机不用占用吃饭睡觉时间，人离了这两样肯定不行{:4_173:} 马黑黑 发表于 2024-1-5 13:04
本事是做出来的
我都不会啊，想做也做不出来啊{:4_173:}
页:
[1]
2