基于JavaScript的电池图标批量下载

最新推荐文章于 2023-08-25 14:26:47 发布

Toblerone_Wind

最新推荐文章于 2023-08-25 14:26:47 发布

阅读量400

点赞数 2

本文链接：https://blog.csdn.net/qq_42276781/article/details/116268278

版权

电量图标网页动画自动下载 html2canvas 百分比进度条

关键词由CSDN通过智能技术生成

1.基本目标

这是一个96%电量的电池图标，现需要 0%，10%，13%，15%，19%，21%，50%的电量图标，且电量会因大小不同有颜色变化，0%-10%红色，10%-50%黄色，50%以上绿色。

2.实现

实现了一个电量均匀递增的网页动画，且按空格可以暂停，方便截图。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>电池图标</title>
</head>
<body>
    <div class="batteryIcon">
        <span class="batteryIconBody">
            <span id="batteryIconProgress" class="batteryIconProgress"></span>
            <span class="batteryIconHead"></span>
        </span>
    </div>
    <div class="batteryIconContent" id="batteryIconContent"></div>
</body>
</html>
<style>
    body {
    text-align: center
}
.batteryIcon {
    margin: 200px auto 0 auto;
    width: 90px;
}
span {
    display: block;
}
.batteryIconBody {
    position: relative;
    width: 80px;
    height: 30px;
    border: 6px solid #333;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.batteryIconHead {
    position: relative;
    height: 15px;
    width: 8px;
    background: #333;
    display: block;
    position: absolute;
    top: 8px;
    left: 82px;
}
.batteryIconProgress {
    height: 30px;
}
.batteryIconContent {
    position: relative;
}
.beginButton {
    margin-top: 100px;
}

</style>
<script>
    var percent = {value:0};
    var flag = 0;

    window.onload = function () {
        var timer = setInterval("testBegin()", 210);
        document.onkeydown=function(e){
            if(e.code == 'Space'){
                if(flag == 0){
                    flag = 1;
                    clearInterval(timer);
                }
                else{
                    flag = 0;
                    timer = setInterval("testBegin()", 210);
                }
            }
        }
    }
//测试开始
function testBegin() {
    if(percent.value > 100){
        return
    }
    var bcontent = document.getElementById("batteryIconProgress");
    var label = document.getElementById("batteryIconContent");
    if(percent.value <= 10){
        bcontent.style.setProperty('background', '#ff0000');
    }
    else if(percent.value > 10 && percent.value <=50){
        bcontent.style.setProperty('background', '#ffd800');
    }
    else{
        bcontent.style.setProperty('background', '#00ff21');
    }
    bcontent.style.setProperty('width', '' + 80 * percent.value / 100 + '');
    label.innerText = ((percent.value) + "%");
    percent.value++;
}


</script>

3.进阶目标

现有100组电池数据，且需要保证截图的大小一致

思路：为保证截图一致，肯定不能使用手动截图，且100组数据，排序后也需要反复暂停100次，故采用自动下载的方式

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>电池图标</title>
    <script src="html2canvas.js"></script>
</head>
<body>
    <div  style="width: 120px;" >
        <div class="batteryIcon" id="battery" style="width: 96px;">
            <span class="batteryIconBody">
                <span id="batteryIconProgress" class="batteryIconProgress"></span>
                <span class="batteryIconHead"></span>
            </span>
        </div>
        <div class="batteryIconContent" id="batteryIconContent"></div>
    </div>
    
</body>
</html>
<style>
    body {
    text-align: center
}
.batteryIcon {
    margin: 200px auto 0 auto;
    width: 90px;
}
span {
    display: block;
}
.batteryIconBody {
    position: relative;
    width: 80px;
    height: 30px;
    border: 6px solid #333;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.batteryIconHead {
    position: relative;
    height: 15px;
    width: 8px;
    background: #333;
    display: block;
    position: absolute;
    top: 8px;
    left: 82px;
}
.batteryIconProgress {
    height: 30px;
}
.batteryIconContent {
    position: relative;
}
.beginButton {
    margin-top: 100px;
}

</style>
<script>
    let arr = [0, 10, 13, 15, 19, 21, 50]
    var percent = {value:0};
    var flag = 0;
    let index = 0;
    let x = setInterval(() => {
        if(index >= arr.length){
            clearInterval(x);
        }
        else{
            percent.value = arr[index];
            var bcontent = document.getElementById("batteryIconProgress");
            var label = document.getElementById("batteryIconContent");
            if(percent.value <= 10){
                bcontent.style.setProperty('background', '#ff0000');
            }
            else if(percent.value > 10 && percent.value <=50){
                bcontent.style.setProperty('background', '#ffd800');
            }
            else{
                bcontent.style.setProperty('background', '#00ff21');
            }
            bcontent.style.setProperty('width', '' + 80 * percent.value / 100 + '');
            label.innerText = ((percent.value) + "%");
            html2canvas(document.getElementById('battery')).then(function(canvas) {
                let img = convertCanvasToImage(canvas);
                downloadIamge(img)
            });
            index++;
        }
    },1000)
    
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}
    function downloadIamge(img) {
         var a = document.createElement('a');
         a.download = percent.value - 1 || '下载图片名称';//这边是文件名，可以自定义
         a.href = img.src;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
     }


</script>

把代码保存到1.html，将所需的电池电量数据存放到arr数组中，保存文件后双击运行后即可实现批量下载。批量下载需要额外的html2canvas.js

代码下载链接

Toblerone_Wind

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
基于JavaScript的电池图标批量下载

1.基本目标这是一个96%电量的电池图标，现需要 0%，10%，13%，15%，19%，21%，50%的电量图标，且电量会因大小不同有颜色变化，0%-10%红色，10%-50%黄色，50%以上绿色。2.实现实现了一个电量均匀递增的网页动画，且按空格可以暂停，方便截图。<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <title>电池图标</title>
复制链接

扫一扫