CSS实现手机信号条

如图想实现下图效果：

纯原生 html + css 实现方式：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.box {width: 300px;height: 300px;margin: 200px auto;}ul {position: relative;width: 200px;height: 200px;}li {width: 5px;position: absolute;bottom: 0;border-radius: 10px;background: rgba(0, 0, 0, 0.5);}ul li:nth-child(1) {height: 10px;left: 0px;}ul li:nth-child(2) {height: 15px;left: 10px;}ul li:nth-child(3) {height: 20px;left: 20px;}ul li:nth-child(4) {height: 25px;left: 30px;}ul li:nth-child(5) {height: 30px;left: 40px;}ul li:nth-child(6) {height: 35px;left: 50px;}</style><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script type="text/javascript">setInterval(function () {var n = Math.random() * 100;console.log(n);$("li").css("background-color", "rgba(0,0,0,.5)");if (n < 16) {$("ul li:lt(1)").css("background", "limegreen");} else if (16 < n && n < 32) {$("ul li:lt(2)").css("background", "limegreen");} else if (32 < n && n < 48) {$("ul li:lt(3)").css("background", "limegreen");} else if (48 < n && n < 64) {$("ul li:lt(4)").css("background", "limegreen");} else if (64 < n && n < 80) {$("ul li:lt(5)").css("background", "limegreen");} else {$("ul li").css("background", "limegreen");}}, 1000);</script></body>
</html>

vue实现方式：

<template><divclass="signal-wrapper":style="{ transform: 'scale(' + scaleX + ',' + scaleY + ')' }"><ul><liv-for="i in 6":key="i":style="{background:'' + (i <= strength ? '#5cf548' : 'rgba(0, 0, 0, 0.4)') + ''}"></li></ul></div>
</template><script>
export default {name: `demo`,props: {// 尺寸width: {type: Number,default: 60},height: {type: Number,default: 40},// 信号强度，默认满格信号strength: {type: Number,default: 6,validator: function (value) {// 必须为不大于6的整数if (value > 6 || value < 0) {console.error(`ERROR in 'SignalStrength.vue':you must provide a number <=6 and >=0!`)return false} else {return true}}}},computed: {scaleX () {return this.width / 60},scaleY () {return this.height / 40}}
}
</script><style lang="scss" scoped>
* {margin: 0;padding: 0;list-style: none;
}
.signal-wrapper {width: 60px;height: 40px;
}
ul {position: relative;width: 100%;height: 100%;
}
li {width: 5px;position: absolute;bottom: 0;border-radius: 10px;background: rgba(0, 0, 0, 0.5);
}
ul li:nth-child(1) {height: 10px;left: 0px;
}
ul li:nth-child(2) {height: 15px;left: 10px;
}
ul li:nth-child(3) {height: 20px;left: 20px;
}
ul li:nth-child(4) {height: 25px;left: 30px;
}
ul li:nth-child(5) {height: 30px;left: 40px;
}
ul li:nth-child(6) {height: 35px;left: 50px;
}
</style>

CSS实现手机信号条相关推荐

小米手机怎么关闭移动卡信号显示无服务器,一条指令代码教你解决小米手机信号和待机问题...
小米手机的性价比一直是让米粉所追寻的为之疯狂的价值追求所在,但是当你你买回一台小米手机的时候,有时候手机信号不好怎么办? 看到这里或许很多人会说这是小米手机的硬件问题,许多米粉可能都不知道小米手机信号 ...
iphone连上wifi却上不了网_必收藏为什么手机信号满格，却上不了网，4招为你解决...
关键时候掉链子! 明明手机信号满格, 怎么突然间就上不了网, 发不出消息? 第一反应,是网络故障了? 那可不一定哦, Now,是小编闪亮登场的时候了! ↓ ↓ ↓ 01 检查手机网络信号不要以为信号 ...
单位阶跃信号是周期信号吗_手机信号变成“HD”，是代表没有信号吗？你的手机正在被扣费...
原标题:手机信号变成"HD",是代表没有信号吗?你的手机正在被扣费有些人已经对手机产生了依赖症,手机一旦处于没有信号,没有网络的情况,他们会变得没有安全感,甚至会发生坐立不安.烦 ...
一加6手机突然没信号没服务器,如何从技术上解决手机信号问题？一加6替你想到了...
近期,最新发布的一加 6搭载 Qualcomm®骁龙™845移动平台,拥有强悍性能的同时,在连接方面也进行了升级,真正称得上"全速"旗舰. 相信很多人都遇到过不得不拿手机" ...
苹果手机上网速度慢_科普|手机信号明明满格却上不去网？4招帮你搞定它！
01 检查手机网络信号不要以为信号条满格,信号就没问题!手机信号好坏,主要看信号值. 怎么来查看这个手机信号值呢? (1)安卓手机: 打开[设置]―[关于手机]―[状态信息]―[SIM卡状态]-[信 ...
苹果手机上网速度慢_手机信号明明满格却上不去网？4招帮你搞定它！
不知道各位亲有没有遇到这样的情况明明手机没有欠费信号条也是满格但就是刷不出网页连上也十分不稳定瞬间感觉整个人都不好了开始质疑人生纠结是不是要换一个新手机了 (这波想换手机的借口不能暴露 ...
手机信号不好？真不是套餐原因！4招教你搞定！
不少小伙伴跟搜卡之家小编抱怨手机信号突然不好,比如: 打着电话突然听不见对方的声音! 手机玩着玩着刷不出来页面和图片! 手机信号满格但上不了网! 这手机是不是坏了! 其实这样的情况大部分都是因为手机信 ...
手机信号屏蔽器的设计与制作
2007-12-25 13:39:55 前些时候,有朋友送来一台<手机信号屏蔽器>,故障是对CDMA手机不起作用,我看了一下说明书,该机应该能够干扰四个频段: CDMA:869-894MH ...
怎么用服务器增强信号,让手机信号增强的六大秒招
原标题:让手机信号增强的六大秒招手机信号不好的情况,相信大家都有遇到过,也有不少人正居住在或工作在手机信号不好的地方,或正在为之苦恼.下面我来介绍几种增强手机信号的常用方法: 第一招:屏幕的秘密如 ...

CSS实现手机信号条

CSS实现手机信号条相关推荐

最新文章

热门文章