HTML充电效果，有目前电量、是否再充电等css与js效果

最新推荐文章于 2024-04-30 09:57:08 发布
最新推荐文章于 2024-04-30 09:57:08 发布
阅读量2.7k 收藏 21
点赞数 11
分类专栏： 前端(js jq h5 css3) 文章标签： css javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53731984/article/details/120519913
版权

主要是用JavaScript和css做出来的简单效果

目录

优点：简洁、显示清楚……算了编不下去了
缺点：需要刷新进行电池的更新 21-9-28更新已解决

测试结果：
谷歌浏览器 完美运行
火狐浏览器 不兼容
Microsoft Edge 浏览器 完美运行
其他浏览器 未测试

效果图

效果图如下：
充电中：
充电中的效果未在充电效果：
未充电效果

话不多说 上代码

源码HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--主题-->
<section class="sec">
<!--主题方格-->
    <div class="box">
<!--        方格中央-->
        <div class="content">
            <h3>电池</h3>
<!--            电池外方格-->
            <div class="batteryShape">
<!--                电池内部阴影-->
                <div class="level">
<!--                    电池显示效果-->
                    <div class="percentage">

                    </div>
                </div>
            </div>
<!--            电池电量显示-->
            <div class="percent">
                50%
            </div>
<!--            是否在充电-->
            <p class="batteryTime">充电状态</p>

        </div>
    </div>
</section>
<script type="text/javascript">
<!--    获取电池显示效果与电池电量显示-->
    var pt = document.querySelector('.percentage');
    var p = document.querySelector('.percent');
    //获取电池状态
    navigator.getBattery().then(function(battery) {

        // 是否正在充电，yes-充电
        console.log("Battery charging? " + (battery.charging ? "yes" : "no"));

        // 当前剩余电量
        console.log("Battery level: " + battery.level * 100 + "%");


        pt.style.width = battery.level * 100 + "%";
        p.innerHTML = battery.level * 100 + "%"

        var charging = battery.charging ? "yes" : "no";
        if (charging === "yes"){
            document.getElementsByClassName('batteryTime')[0].innerHTML = '正在充电';
        }else {
            document.getElementsByClassName('batteryTime')[0].innerHTML = '未在充电';
        }
    });

</script>
</body>
</html>

源码CSS

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
section::before{
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    background: linear-gradient(#f3f3f3,#9c27b0);
    border-radius: 50%;
    transform: translate(-150px,-100px);

}
section::after{
    content: '';
    position: absolute;
    width: 251px;
    height: 251px;
    background: linear-gradient(#fd2c72, rgba(243, 243, 243, 0.51));
    border-radius: 50%;
    transform: translate(160px,180px);

}
.box{
    position: relative;
    width: 240px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
    box-shadow: 0 25px 45px rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.25);
    border-right: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(25px);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.box h3{
    color: #9c27b0;
    font-weight: 500;
    font-size: 1.3em;
    letter-spacing: 3px;
}
.box .batteryShape{
    position: relative;
    width: 140px;
    height: 65px;
    margin: 20px 0;
    border: 3px solid #333;
    border-radius: 10px;
}
.batteryShape::before{
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    margin-left: 2px;
    transform: translateY(-50%);
    width: 7px;
    height: 16px;
    background: #333;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.batteryShape::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255,255,255,.1);
}
.level{
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 4px;
    overflow: hidden;
}
.percentage{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg,#9c27b0,#fd2c72);
}
.batteryTime{
    font-size: 0.6em;
    color: #333333;
    letter-spacing: -0.6px;
}

21-9-28更新

主要增加了监听事件，电池有变化就进行更新，不用刷新页面来进行更新电池状态

<script type="text/javascript">
<!--    获取电池显示效果与电池电量显示-->
    var pt = document.querySelector('.percentage');
    var p = document.querySelector('.percent');
    //获取电池状态
    navigator.getBattery().then(function(battery) {

        // 是否正在充电，yes-充电
        console.log("Battery charging? " + (battery.charging ? "yes" : "no"));

        // 当前剩余电量
        console.log("Battery level: " + battery.level * 100 + "%");

        //初始化电量
        pt.style.width = battery.level * 100 + "%";
        p.innerHTML = battery.level * 100 + "%"
        //监听电量变化
        battery.addEventListener("levelchange", function (e) {
            console.log("电量水平变化: ", battery.level);
            pt.style.width = battery.level * 100 + "%";
            p.innerHTML = battery.level * 100 + "%"
        }, false);


        //初始化电池状态变化
        var charging = battery.charging ? "yes" : "no";
        if (charging === "yes"){
            document.querySelector('.batteryTime').innerHTML = '正在充电';
        }else {
            document.querySelector('.batteryTime').innerHTML = '未在充电';
        }
        //监听电池充电状态变化
        battery.addEventListener("chargingchange", function (e) {
            console.warn("电池充电状态变化: ", battery.charging);
            var cd = battery.charging?'yes':'no';
           if (cd == 'yes'){
                document.getElementsByClassName('batteryTime')[0].innerHTML = '正在充电';
            }else {
                document.getElementsByClassName('batteryTime')[0].innerHTML = '未在充电';
            }
        }, false);
    });
</script>

        //监听电量变化
        battery.addEventListener("levelchange", function (e) {
            console.log("电量水平变化: ", battery.level);
            pt.style.width = battery.level * 100 + "%";
            p.innerHTML = battery.level * 100 + "%"
        }, false);

 //监听电池充电状态变化
        battery.addEventListener("chargingchange", function (e) {
            console.warn("电池充电状态变化: ", battery.charging);
            var cd = battery.charging?'yes':'no';
           if (cd == 'yes'){
                document.getElementsByClassName('batteryTime')[0].innerHTML = '正在充电';
            }else {
                document.getElementsByClassName('batteryTime')[0].innerHTML = '未在充电';
            }
        }, false);

好的，这就是所有代码了
参考：
bilibili ：编程大大怪 https://www.bilibili.com/video/BV1kM4y1g7B9

99 little bugs in the code..
关注
  • 11
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
12-05
纯CSS绘制电池充电水波纹动效源码，请下载后使用HbuilderX打开，直接运行即可，建议在最新版的谷歌浏览器中运行动效
基于CSS的年度合约电量分解方法
01-12
以华东电力市场为背景，提出一种基于电荷系统搜索（CSS）算法的年度合约电量分解方法。针对国内外电量合同形式差异，分析总结合约电量分解方法的研究现状；介绍华东电力市场在年度市场中的运营规则，充分考虑预测不确定性、机组发电成本以及废气排放等因素，提出按月度电量分解和按机组电量分解2个步骤完成年度合约电量分解的方法；设计电量分解的带约束优化模型，利用CSS算法求得所建立模型的最优解。结合IEEE 30节点标准测试系统的基础数据构建实验数据，验证了所提年度合约电量分解方法的有效性。
CSS 伪类、伪元素的应用实例：电池充电、高能进度条
最新发布
无解的菜鸟晖 的博客
04-30 1398
本文通过 CSS 伪类、伪元素，结合动画 animation 和 Vue 动态样式属性（通过 CSS 变量）的写法，来实现电池充电、高能进度条的效果。 CSS 伪类是对当前元素下，处于某些特定状态时而添加特殊效果的样式（基于文档之外的抽象，所以叫伪类），不产生新元素，写法用单冒号（:）开头。 CSS 伪元素是对当前元素下，某些特殊部位应用样式，通过创建虚拟元素实现，一般与 content 属性一起使用（基于元素的抽象，所以叫伪元素），写法用双冒号（::）开头。CSS 变量 var() 用于插入自定义属性。
HTML实现电池电量图标动态变化
04-29
HTML实现电池电量图标动态变化
Html 电池图标
北京-老黑的博客
01-31 3125
效果截图： Html页： &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &lt;title&gt;电池图标&lt;/title&gt;     &lt;link href="BatteryIconStyle.css" rel="stylesheet&q
css 电池loading加载效果
weixin_45986657的博客
04-23 107
【代码】css 电池loading加载效果。
手机充电效果css
hmily43的博客
04-12 595
画个电池 当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个： 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 方法很多，代码也很简单，直接看效果： 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。 <div class="container"> <div class="battery"></div&gt
html+css：电池电量百分比效果图
qq_43033251的博客
03-01 4549
效果图： 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container { height: 200px; width: 120px; posit...
html css 画电池,CSS画的电量提示图形
weixin_42304230的博客
06-28 1015
CSS语言：CSSSCSS确定*,*:before,*:after {box-sizing: border-box;}.wrapper {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #132133;background: -webkit-radial-gradient(center circle, #132...
css 动画电池充电
BYH的博客
01-13 592
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
简单的充电动画
qq_46484086的博客
01-28 851
画个电池 首先用css随便画一个电池 然后加入简单动画，用颜色填满 增加一点颜色变化 最后添加波浪 波浪通过障碍实现 代码如下 HTML <div class="container"> <div class="header"></div> <div class="battery"> </div> <div class="battery-copy"> ...
QCC增加电池电量显示的代码
08-21
博文引用代码。 通过在配置xml区域增加代码实现电量显示功能。
battery:内置HTML，CSS和JS的电池充电动画
03-16
在给定的"battery:内置HTML，CSS和JS的电池充电动画"项目中，我们可以深入探讨如何使用这三种核心技术构建这样的动画效果。 首先，HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义页面的布局...
手机充电电池CSS3特效
04-25
【手机充电电池CSS3特效】是一种利用Web前端技术实现的动态视觉效果，它结合了CSS3的keyframe动画和border-radius属性，为网页元素创建出逼真的手机电池充电过程。这个特效不仅能够增加用户界面的互动性和趣味性，还...
CSS3智能手机充电动画特效
06-24
在实际开发中，通常会将这些CSS3特性与HTML结构相结合，使用JavaScript或者jQuery进行控制，比如根据实际电量动态调整动画进度，或者在充电达到一定比例时触发其他交互事件。 为了实现【CSS3智能手机充电动画特效】...
巧用 CSS 实现酷炫的充电动画
终极冥帝
12-23 646
循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 画个电池小说网站 wap.youxs.org 当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个： 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 方法很多，代码也很简单，直接看效果： 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变...
CSS实现不同状态的电池电量图
vidvan的专栏
04-25 345
使用CSS实现电池不同状态的电量图效果，低电量红色、省电模式橘黄色、正常状态绿色等三种颜色.....
CSS充电状态效果
特创数字
02-20 292
【代码】CSS充电状态效果。
html充电中效果图,手机充电特效.html
weixin_28487433的博客
06-03 250
充电特效*{padding: 0;margin: 0;}.box{width: 800px;height: 600px;margin: 20 auto;background-color: #000;padding-top: 20px;}/* filter(滤镜) *//* contrast(%) 调整图像对比度 *//* blur(px) 设置高斯模糊 *//* hue-rotate(deg) ...
vue实现汽车充电桩给汽车充电时，电量上升的动态效果代码
06-01
可以使用Vue的过渡效果来实现动态效果。具体代码如下： ``` <template> <div class="charging"> <div class="battery"> <div class="fill" :style="{height: fillHeight}"> <transition name="fill"> <div v-show="isCharging" class="flash"></div> </transition> </div> </div> <div class="charge-status">{{ chargeStatus }}</div> </div> </template> <script> export default { data() { return { isCharging: false, fillHeight: 0, chargeStatus: "未充电" }; }, methods: { startCharging() { this.isCharging = true; this.chargeStatus = "充电中"; let i = 0; const interval = setInterval(() => { if (i >= 100) { clearInterval(interval); this.isCharging = false; this.chargeStatus = "充电完成"; return; } this.fillHeight = `${i}%`; i++; }, 100); } } }; </script> <style scoped> .charging { display: flex; flex-direction: column; align-items: center; font-size: 20px; } .battery { position: relative; width: 100px; height: 200px; background-color: #ccc; border-radius: 20px; overflow: hidden; } .fill { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #0084ff; transition: height 1s ease-in-out; } .flash { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5); animation: flash 0.5s ease-in-out infinite alternate; } .charge-status { margin-top: 20px; font-size: 24px; color: #0084ff; } @keyframes flash { from { opacity: 0; } to { opacity: 1; } } .fill-enter-active, .fill-leave-active { transition: height 1s ease-in-out; } .fill-enter, .fill-leave-to { height: 0; } </style> ``` 在这个示例中，我们使用了一个 `fill` 元素来模拟电量上升的效果。当开始充电时，我们将 `isCharging` 设置为 `true`，同时将 `chargeStatus` 设置为 `充电中`。然后，我们使用 `setInterval` 定时器来不断更新 `fillHeight`，从而实现电量上升的动态效果。当电量上升到100时，我们清除定时器，将 `isCharging` 设置为 `false`，同时将 `chargeStatus` 设置为 `充电完成`。 在模板中，我们使用了一个过渡效果来实现闪烁的效果。当 `isCharging` 为 `true` 时，显示一个闪烁的 `flash` 元素。我们使用了 `v-show` 指令来控制 `flash` 元素的显示和隐藏。同时，我们在 `fill` 元素上使用了一个 `fill` 过渡名称，来实现电量上升的过渡效果。 在样式中，我们使用了 `scoped` 属性来限制样式的作用域。我们使用了 `position: relative` 来使 `fill` 元素相对于 `battery` 元素进行定位。同时，我们使用了 `overflow: hidden` 来隐藏 `fill` 元素溢出的部分。我们还定义了一个 `flash` 动画，来使闪烁的 `flash` 元素实现闪烁的效果。最后，我们定义了四个过渡类名，来实现电量上升的过渡效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值