简易体温针简单做

马黑黑

先看效果：

  
  
代码非常简单：

<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>

<div class="tube">
   <div class="meter"></div>
</div>

.tube 选择器是体温针主体，两头即顶盖和底座用box-shadow做的；.meter 选择器是体（进）温（度）显示，它的 top 值可以进行开发。

马黑黑

马黑黑

三楼，我们在CSS里加入一个关键帧动画：

@keyframes up {
        from { top: 100px; }
        to { top: 0; }
}

然后在 .meter 选择器通过 animation 调用动画：

animation: up 4s linear infinite;

这就是对 .meter 选择器的 top 值 的开发，基于CSS

马黑黑

醉美水芙蓉 发表于 2022-5-22 09:16
黑黑老师又有新作品啦！先欣赏一下！

早上好

红影

看得笑，下回黑黑会不会做个注射器播放器

马黑黑

红影 发表于 2022-5-22 10:56
看得笑，下回黑黑会不会做个注射器播放器

注射器是违禁品

加林森

这个漂亮。

马黑黑

加林森 发表于 2022-5-22 11:56
这个漂亮。

过得去的吧

加林森

马黑黑 发表于 2022-5-22 11:58
过得去的吧

当然啦

马黑黑

JS开发的效果：

马黑黑

JS开发体温针的代码：

1. <div class="tube">
   
2.         <div id="meter" class="meter"></div>
   
3. </div>
   
4. 
   
5. <script>
   
6. let task = 10, current = 0;
   
7. let meter = document.querySelector('#meter');
   
8. 
   
9. setInterval(up, 1000);
   
10. 
    
11. function up() {
    
12.         current ++;
    
13.         let prog = current / task * 100;
    
14.         if(prog >= 100) current = 0;
    
15.         meter.style.transform = 'translateY(-' + prog + 'px)';
    
16. }
    
17. </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的开发方式。

我们的回帖让黑黑还没法完楼层就被占了

加林森

老黑真厉害。

马黑黑

红影 发表于 2022-5-22 13:56
我们的回帖让黑黑还没法完楼层就被占了

没关系

加林森

再来学习

马黑黑

加林森 发表于 2022-5-22 19:07
再来学习

加林森

马黑黑 发表于 2022-5-22 19:17

谢茶