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

代码下载链接

基于JavaScript的电池图标批量下载相关推荐

C#实现图标批量下载
本文略微有些长,花了好几晚时间编辑修改,若在措辞排版上有问题,请谅解.本文共分为四篇,下面是主要内容,也是软件开发基本流程. 阶段描述需求分析主要描述实现本程序的目的及对需求进行分析,即为什么要 ...
android源码下载方法批量下载基于windows os
安装win版的Gitbash, 在这里 http://msysgit.googlecode.com/files/Git-1.6.0.2-preview20080923.exe. 选择默认安装路径(否则 ...
爬虫小案例：基于Bing关键词批量下载图片（第二版）
一.需求: 基于Bing网站,输入关键词,批量下载图片保存到本地二.代码展示: import requests from lxml import etree import os from multi ...
爬虫小案例：基于Bing关键词批量下载图片
一.需求: 基于Bing网站,输入关键词,批量下载图片保存到本地二.演示: 三.直接上代码 import os import urllib.request import urllib.parse f ...
JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载
JavaScript 多文件下载 HTML5中 a 标签新增了一个属性 download,一般情况下,用户点击a链接浏览器会打开对应的链接地址,如果链接地址是一个文件如(xxx.rar.xxx.jpg ...
阿里巴巴矢量图标库批量下载图标
阿里巴巴矢量图标库是前端工程师常用到的一个网站.网址:阿里巴巴矢量图标库但是每次下载图标都要挨个点击一下下载按钮,页面不提供批量下载. 操作起来很不方便. 后来我在网上查询,总算找到批量下载的方法, ...
超棒的免费电池图标下载
免费的各种电池矢量图标效果,相信有你需要的一款! 阅读原文:超棒的免费电池图标下载
JavaScript前端：与PDF.js结合，实现网页PDF内容批量下载
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript前端:与PDF.js结合,实现网页PDF内容批量下载前言一.PDF.js是什么? 二.PDF.js单个PDF文 ...
基于 java 的批量下载压缩包的实现
controller 代码 @ApiOperation(value = "系统文件批量下载接口", produces = "application/octet-strea ...

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

1.基本目标

2.实现

3.进阶目标

基于JavaScript的电池图标批量下载相关推荐

最新文章

热门文章