JS获取手机电量，型号，以及充电特效
获取手机电量，型号，以及css实现充电特效
- 获取手机电量相关信息
- 获取手机相关型号信息
- css实现充电特效
获取手机电量相关信息
移动端和PC端皆适用
//获取手机电量信息
// charging: 是否在充电
// chargingTime: 充满电还需要的时间(秒)
// dischargingTime: 电池剩余可用时间(秒)
// level: 剩余电量,最大电量就是1
// onchargingchange: 充电状态改变时触发该监听函数
// onchargingtimechange: 充满还需时间改变时触发该监听函数
// ondischargingtimechange: 电池剩余可用时间改变时触发该监听函数
// onlevelchange: 电量改变时触发该监听函数
let power = {}
navigator.getBattery().then(function (battery) {
power.isCharging = battery.charging
power.level = battery.level
power.needChargingTime = battery.chargingTime
power.elseTime = battery.dischargingTime
console.log("是否在充电? " + (battery.charging ? "Yes" : "No"));
console.log("剩余电量,最大电量就是1: " + battery.level * 100 + "%");
console.log("充满电还需要的时间(秒): " + battery.chargingTime + " seconds");
console.log("电池剩余可用时间(秒): " + battery.dischargingTime + " seconds");
battery.addEventListener('chargingchange', function () {
console.log("充电状态改变时触发该监听函数? " + (battery.charging ? "Yes" : "No"));
power.isCharging = battery.charging
});
battery.addEventListener('levelchange', function () {
console.log("电量改变时触发该监听函数: " + battery.level * 100 + "%");
power.level = battery.level
});
battery.addEventListener('chargingtimechange', function () {
console.log("充满还需时间改变时触发该监听函数: " + battery.chargingTime + " seconds");
power.needChargingTime = battery.chargingTime
});
battery.addEventListener('dischargingtimechange', function () {
console.log("电池剩余可用时间改变时触发该监听函数: " + battery.dischargingTime + " seconds");
power.elseTime = battery.dischargingTime
});
// console.log(power)
});
获取手机相关型号信息
<script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"></script>
<script>
//判断数组中是否包含某字符串
Array.prototype.contains = function (needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
var device_type = navigator.userAgent;//获取userAgent信息
var md = new MobileDetect(device_type);//初始化mobile-detect
var os = md.os();//获取系统
var model = "";
if (os == "iOS") {
//ios系统的处理
os = md.os() + md.version("iPhone");
model = md.mobile();
} else if (os == "AndroidOS") {
os = md.os() + md.version("Android");
var sss = device_type.split(";");
var i = sss.contains("Build/");
if (i > -1) {
model = sss[i].substring(0, sss[i].indexOf("Build/"));
}
}
// alert(model);//打印手机型号
</script>
css实现充电特效
html部分
<div class="container">
<div class="box">
<div class="level"> {{powerInfo.level*100}}%</div> /*电量百分比展示*/
<div class="circle"> </div>
<ul class="bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
样式部分
.container {
transform: scale(.4);
position: absolute;
// width: 300px;
// height: 400px;
width: 100%;
top: -25px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
.box {
filter: contrast(15) hue-rotate(0);
width: 100%;
height: 400px;
overflow: hidden;
animation: hueRotate 10s infinite linear;
.level {
position: absolute;
width: 100%;
height: 100%;
top: 25%;
text-align: center;
font-size: 40px;
z-index: 10;
color: #fff;
}
.circle {
position: relative;
width: 100%;
height: 300px;
box-sizing: border-box;
filter: blur(8px);
&::after {
content: "";
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
animation: rotate 10s infinite linear;
}
&::before {
content: "";
position: absolute;
width: 176px;
height: 176px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
// background-color: #000;
z-index: 10;
}
}
.bubbles {
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 40px;
transform: translate(-50%, 0);
border-radius: 100px 100px 0 0;
background-color: #00ff6f;
filter: blur(5px);
}
li {
position: absolute;
border-radius: 50%;
background: #00ff6f;
}
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
left: 15 + random(70) + px;
top: 50%;
transform: translate(-50%, -50%);
width: $width;
height: $width;
animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .1;
transform: translate(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
}
}
}
