简易体温针简单做
<style>.tube {
margin: 20px auto;
display: flex;
justify-content: center;
width: 10px;
height: 100px;
background-color: #eee;
background: linear-gradient(#aaa 1px, #eee 1px);
background-size: 8px 10px;
box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.meter {
position: absolute;
width: 4px;
height: 100px;
background: rgba(255,0,0,.45);
top: 54px;
}
</style>
<p>先看效果：<br></p>
<div class="tube">
<div class="meter"></div>
</div>
<pre>
代码非常简单：
<style>
<span style="color: red;">.tube </span>{
<span style="color: blue;">margin</span>: 20px auto;
<span style="color: blue;">display</span>: flex;
<span style="color: blue;">justify-content</span>: center;
<span style="color: blue;">width</span>: 10px;
<span style="color: blue;">height</span>: 100px;
<span style="color: blue;">background-color</span>: #eee;
<span style="color: blue;">background</span>: linear-gradient(#aaa 1px, #eee 1px);
<span style="color: blue;">background-size</span>: 8px 10px;
<span style="color: blue;">box-shadow</span>: 0 -8px 0 0 red, 0 18px 0 0 red;
<span style="color: blue;">border-radius</span>: 4px;
<span style="color: blue;">overflow</span>: hidden;
<span style="color: blue;">cursor</span>: pointer;
<span style="color: blue;">position</span>: relative;
}
<span style="color: red;">.meter </span>{
<span style="color: blue;">position</span>: absolute;
<span style="color: blue;">width</span>: 4px;
<span style="color: blue;">height</span>: 100px;
<span style="color: blue;">background</span>: rgba(255,0,0,.45);
<span style="color: blue;">top</span>: 54px;
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"tube"</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"meter"</span>><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
</pre>
<p>.tube 选择器是体温针主体，两头即顶盖和底座用box-shadow做的；.meter 选择器是体（进）温（度）显示，它的 top 值可以进行开发。</p> 本帖最后由 马黑黑 于 2022-5-22 09:20 编辑 <br /><br /><style>
.goup { animation: up 4s linear infinite; }
@keyframes up {
from { top: 100px; }
to { top: 0; }
}
</style>
<div class="tube">
<div class="meter goup"></div>
</div> 三楼，我们在CSS里加入一个关键帧动画：
@keyframes up {
from { top: 100px; }
to { top: 0; }
}
然后在 .meter 选择器通过 animation 调用动画：
animation: up 4s linear infinite;
这就是对 .meter 选择器的 top 值 的开发，基于CSS 醉美水芙蓉 发表于 2022-5-22 09:16
黑黑老师又有新作品啦！先欣赏一下！
早上好 看得笑，下回黑黑会不会做个注射器播放器{:4_170:} 红影 发表于 2022-5-22 10:56
看得笑，下回黑黑会不会做个注射器播放器
注射器是违禁品 这个漂亮。 加林森 发表于 2022-5-22 11:56
这个漂亮。
过得去的吧 马黑黑 发表于 2022-5-22 11:58
过得去的吧
当然啦 本帖最后由 马黑黑 于 2022-5-22 12:29 编辑 <br /><br /><p>JS开发的效果：<br><br></p>
<div class="tube">
<div id="meter" class="meter" style="top: 100px"></div>
</div>
<script>
let task = 10, current = 0;
let meter = document.querySelector('#meter');
setInterval(up, 1000);
function up() {
current ++;
let prog = current / task * 100;
if(prog >= 100) current = 0;
meter.style.transform = 'translateY(-' + prog + 'px)';
}
</script>
JS开发体温针的代码：
<div class="tube">
<div id="meter" class="meter"></div>
</div>
<script>
let task = 10, current = 0;
let meter = document.querySelector('#meter');
setInterval(up, 1000);
function up() {
current ++;
let prog = current / task * 100;
if(prog >= 100) current = 0;
meter.style.transform = 'translateY(-' + prog + 'px)';
}
</script>
12楼代码解释：
首先，.meter选择器top值设为100，也就是和其父元素及其它自身的高度一致，这样，meter开始时是不可见的。
其次，我们给meter元素加一个id，并在JS通过此id获得针对它的操作句柄——这是因为本页的前面已有几个类名为meter的元素了，不能有冲突。
接着就是JS具体代码了：
06：先假设任务总量 task 为10（秒），当前完成量 current 为0（秒）
07：获得元素操作句柄
09：setInterval定时器每秒运行一次自定义函数 up()
11-16: up() 自定义函数——
12：current ++ ，当前任务量每执行函数一次完成量加1
13：换算完成量百分比
14：若完成量达到100，则重来，所以current 就等于0
15：根据任务完成量和总量的比例调整体温针的进度
调整进度我们没有使用用 meter元素的 top 值，而是用了 transform: translateY() ，其实两者都可以的，用后者一样可以在 meter 元素原有位置上上拉。注意我们在给 translateY 赋值是使用了负数符号，这是因为 meter 元素的top值为100px，这意味着上移的时候是从父元素的底部开始的，meter的top值应根据任务完成量的百分比回移才能形成上升的姿势，回移终点是 0 即原位。 JS的实际开发当然要根据具体场景而定，12楼的实现方式只是为了说明JS对top的开发方式。 马黑黑 发表于 2022-5-22 13:00
JS的实际开发当然要根据具体场景而定，12楼的实现方式只是为了说明JS对top的开发方式。
我们的回帖让黑黑还没法完楼层就被占了{:4_173:} 老黑真厉害。{:4_199:} 红影 发表于 2022-5-22 13:56
我们的回帖让黑黑还没法完楼层就被占了
没关系 再来学习 加林森 发表于 2022-5-22 19:07
再来学习
{:4_190:} 马黑黑 发表于 2022-5-22 19:17
谢茶
页:
[1]