微信小程序–电池容量、电池剩余电量样式

微信小程序–电池容量、电池剩余电量样式效果如图所示:竖列的我用的旋转横列90度实现的wxml:<viewclass=”complex”><viewdata-charge=’0’class=”battery”></view><viewdata-charge=’1’class=”battery”></view><viewdata-charge=’2’class=”battery”></view&gt…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

效果如图所示:竖列的我用的旋转横列90度实现的

微信小程序--电池容量、电池剩余电量样式

wxml:

<view class=”complex”>

      <view data-charge=’0′ class=”battery”></view>

      <view data-charge=’1′ class=”battery”></view>

      <view data-charge=’2′ class=”battery”></view>

      <view data-charge=’3′ class=”battery”></view>

      <view data-charge=’4′ class=”battery”></view>

      <view data-charge=’5′ class=”battery”></view>

      <view data-charge=’6′ class=”battery”></view>

      <view data-charge=’7′ class=”battery”></view>

      <view data-charge=’8′ class=”battery”></view>

      <view data-charge=’9′ class=”battery”></view>

      <view data-charge=’10’ class=”battery”></view>

</view>

 

<view class=”complex”>

      <view data-charge=’0′ class=”battery1″></view>

      <view data-charge=’1′ class=”battery1″></view>

      <view data-charge=’2′ class=”battery1″></view>

      <view data-charge=’3′ class=”battery1″></view>

      <view data-charge=’4′ class=”battery1″></view>

      <view data-charge=’5′ class=”battery1″></view>

      <view data-charge=’6′ class=”battery1″></view>

      <view data-charge=’7′ class=”battery1″></view>

      <view data-charge=’8′ class=”battery1″></view>

      <view data-charge=’9′ class=”battery1″></view>

      <view data-charge=’10’ class=”battery1″></view>

</view>

wxss:

.battery {

  color: #34495e;

  border: 1px solid currentColor;

  display: inline-block;

  width: 50px;

  height: 20px;

  position: relative;

  border-radius: 2px;

  display: border-box;

  margin: 5px;

}

.battery::before,

.battery::after {

  content: “”;

  position: absolute;

}

.battery::before {

  top: 2px;

  bottom: 2px;

  right: -3px;

  width: 1px;

  display: border-box;

  border: 1px solid currentColor;

  border-left: 0;

}

.battery::after {

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: 1px;

  border-radius: 1px;

  background-color: currentColor;

  transition: right 500ms;

}

.battery.low {

  color: #c0392b;

}

.battery.low::after {

  right: 80%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery.med {

  color: #f39c12;

}

.battery.med::after {

  right: 40%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery.full {

  color: #27ae60;

}

.battery[data-charge=’0′],

.battery[data-charge=’1′],

.battery[data-charge=’2′],

.battery[data-charge=’3′] {

  color: #c0392b;

}

.battery[data-charge=’4′],

.battery[data-charge=’5′],

.battery[data-charge=’6′] {

  color: #f39c12;

}

.battery[data-charge=’7′],

.battery[data-charge=’8′],

.battery[data-charge=’9′],

.battery[data-charge=’10’] {

  color: #27ae60;

}

.battery[data-charge=’0′]::after {

  right: 100%;

}

.battery[data-charge=’1′]::after {

  right: 85%;

}

.battery[data-charge=’2′]::after {

  right: 80%;

}

.battery[data-charge=’3′]::after {

  right: 70%;

}

.battery[data-charge=’4′]::after {

  right: 60%;

}

.battery[data-charge=’5′]::after {

  right: 50%;

}

.battery[data-charge=’6′]::after {

  right: 40%;

}

.battery[data-charge=’7′]::after {

  right: 30%;

}

.battery[data-charge=’8′]::after {

  right: 20%;

}

.battery[data-charge=’9′]::after {

  right: 10%;

}

.battery[data-charge=’10’]::after {

  right: 0%;

}

 

/*纵向*/

.battery1 {

  color: #34495e;

  border: 1px solid currentColor;

  display: inline-block;

  width: 50px;

  height: 20px;

  position: relative;

  border-radius: 2px;

  display: border-box;

  margin: 30px;

  transform: rotate(-90deg);

/*   transition: color 500ms; */

}

.battery1::before,

.battery1::after {

  content: “”;

  position: absolute;

}

.battery1::before {

  top: 2px;

  bottom: 2px;

  right: -3px;

  width: 1px;

  display: border-box;

  border: 1px solid currentColor;

  border-left: 0;

}

.battery1::after {

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: 1px;

  border-radius: 1px;

  background-color: currentColor;

  transition: right 500ms;

}

.battery1.low {

  color: #c0392b;

}

.battery1.low::after {

  right: 80%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery1.med {

  color: #f39c12;

}

.battery1.med::after {

  right: 40%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery1.full {

  color: #27ae60;

}

.battery1[data-charge=’0′],

.battery1[data-charge=’1′],

.battery1[data-charge=’2′],

.battery1[data-charge=’3′] {

  color: #c0392b;

}

.battery1[data-charge=’4′],

.battery1[data-charge=’5′],

.battery1[data-charge=’6′] {

  color: #f39c12;

}

.battery1[data-charge=’7′],

.battery1[data-charge=’8′],

.battery1[data-charge=’9′],

.battery1[data-charge=’10’] {

  color: #27ae60;

}

.battery1[data-charge=’0′]::after {

  right: 100%;

}

.battery1[data-charge=’1′]::after {

  right: 85%;

}

.battery1[data-charge=’2′]::after {

  right: 80%;

}

.battery1[data-charge=’3′]::after {

  right: 70%;

}

.battery1[data-charge=’4′]::after {

  right: 60%;

}

.battery1[data-charge=’5′]::after {

  right: 50%;

}

.battery1[data-charge=’6′]::after {

  right: 40%;

}

.battery1[data-charge=’7′]::after {

  right: 30%;

}

.battery1[data-charge=’8′]::after {

  right: 20%;

}

.battery1[data-charge=’9′]::after {

  right: 10%;

}

.battery1[data-charge=’10’]::after {

  right: 0%;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171046.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 一个使用Java jdk8中Nashorn(Java javascript引擎)设计的Web开发框架

    一个使用Java jdk8中Nashorn(Java javascript引擎)设计的Web开发框架

  • Fragment 的 onResume()

    Fragment 的 onResume()/***1.Fragment第一次创建时调用*2.切换程序(如点了Home键)后恢复Fragment可见时调用*3.切换fragment的hide和visible的时候可能不会调用*/@OverridepublicvoidonResume(){super.onResume();if(isAdded()&amp;&amp;!isHidden…

  • Swift 值类型和引用类型

    Swift中的类型分为两类:一,值类型(valuetypes),每个值类型的实例都拥有各自唯一的数据,通常它们是结构体,枚举或元组;二,引用类型(referencetypes),引用类型的实例共享

    2021年12月26日
  • 服务器版dll修复工具,dll修复工具「建议收藏」

    服务器版dll修复工具,dll修复工具「建议收藏」winmm.dll是Windows多媒体相关应用程序接口,用于低档的音频和游戏手柄,缺少它可能造成部分软件无声音。当你的电脑提示“丢失winmm.dll”或者“没有找到winmm.dll”等类似错误信息。如果sqlite3.dll系统文件丢失、损坏,自行寻找选择适合系统的DLL系统文件,不但麻烦,还得冒着系统异常的风险。无主之地、荣誉勋章等游戏所需的physxcudart_20.Dll下载,解压后…

  • 人工智能万亿市场待挖掘

    人工智能万亿市场待挖掘1.新技术革命登场,IT发展焦点将从互联网转向人工智能发轫于2007年的移动互联网浪潮已经席卷全球,极大地改变了我们的生存状态。然而,就在资本市场热切地期待移动互联网催生出更多新应用服务、更多新商业模式的时候,由技术水平不足导致的发展瓶颈已然出现。与此同时,为突破上述瓶颈,新一轮更激动人心、更值得期待的技术革命风暴已经诞生,将成为未来10年乃至更长时间内IT产业发展的焦点,将再次并更加彻底地颠

  • 数据结构之ElemType

    数据结构之ElemType数据结构之ElemType也可能写作Elem等,主要是为了定义方便而存在的,一般出现ElemType的代码,都会在代码开头或者引用的文件中有一句typedef数据类型ElemType;的定义。//主要是为了方便,例:以后如果想修改ElemType的类型为long,只需写一句typedeflongElemType;例:typedefintElemType;ElemTypee;…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号