css代码模拟时钟 +js对时

最新推荐文章于 2023-12-28 14:30:20 发布
最新推荐文章于 2023-12-28 14:30:20 发布
阅读量1.2k 收藏 6
点赞数 1
分类专栏： WEB前端 文章标签： css3 动画 指针 代码 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rtian001/article/details/48623009
版权


使用CSS3纯代码来实现模拟时钟，及指针动画功能。

在这里主要使用到css3一些基本元素：

border-radius：圆角边框，画圆形；表盘

Transform：变换，旋转，扭曲；刻度盘，指针形状

Animation：时分秒指针转动。

:before/:after :伪元素

 

 

基本思路：

  <div id="clock"class="">

<ul>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="kedu"></li>

<liclass="shzi s3">3</li>

<liclass="shzi s6">6</li>

<liclass="shzi s9">9</li>

<liclass="shzi s12">12</li>

<liclass="hh"></li>

<liclass="mm"></li>

<liclass="ss"></li>

<liclass="ms"></li>

<liclass="biaopan"></li>

<liclass="biaozhou"></li>

<li class="logo">♔</li>

</ul>

  </div>

-----------------------

1.使用div+css画圆来定义时钟底盘，使用其伪类:before和:after，相当于增加两个容器，用于设计表盘轮廓或定位线；使用border-radius属性设计圆形。

 

图1.使用伪元素将一个div变为三个可用的容器。

<!DOCTYPEhtml>

<html>

 <head>

  <title> new document </title>

  <meta charset="utf-8" />

 

  <style type="text/css">

#clock{

position:absolute;

width:50px;

height:50px;

background:#000;

border-radius:10px;

}

#clock:before{

content:"";

position:absolute;

top:20px;

left:20px;

width:50px;

height:50px;

background:#0f0;

border-radius:20px;

}

#clock:after{

content:"";

position:absolute;

top:40px;

left:40px;

width:50px;

height:50px;

background:#f0f;

border-radius:100%;

border-radius:25px;

}

 

  </style>

 </head>

 

 <body>

  <div id="clock"class="">  </div>

 </body>

</html>

 

2.使用li的block属性设计两端的边框来定义时钟的60个刻度。设置li的上下边框线使其成为2个刻度，使用li的伪类:before和:after，分别增加2个刻度；即时，1个li元素就可以定义3个层块6个刻度。所以，需要10个li来完成60十个刻度。

  <style type="text/css">

.Numerals{

display:inline-block;

width:3px;height:351px;

top:11px;left:203px;

border-top:15pxsolid #000;

border-bottom:15pxsolid #000;

}

 

  </style>

  <ul>

<liclass="Numerals"></li>

<li></li>

  </ul>

然后通过旋转完成60个刻度。

 

3.定义指针：li为指针主体，li:before和li:after来定义指针头部和尾部（矩形变形为菱形transform:rotate(-45deg)skew(-30deg,-30deg);，矩形3角圆角为水滴型border-radius:100% 0 100% 100%;）

 

4.指针动画：定位好表轴位置（旋转点）transform-origin:2px 100%;然后设计秒针分针时针的旋转动画即可：秒针每秒跳一格6度，60秒360度；分针12秒跳一格6度，3600秒360度；时针可以设计为连续走、每秒跳或按格跳、按半格跳等。

 

.hourHand{        animation:anim_hr43200s linear infinite;        }

.minuteHand{        animation:anim_min3600s  steps(60)infinite;        }

.secondHand{        animation:anim_sec60s steps(60) infinite;        }

 

@keyframes anim_sec{

from{transform:rotate(0deg);}

to{        transform:rotate(360deg);}

}

@keyframes anim_min{

to{        transform:rotate(360deg);}

}

@keyframes anim_hr{

to{        transform:rotate(360deg);}

}

 

5.细节处理：表盘样式、logo、浏览器兼容性等。

 

6.效果图：

7.全部代码：/*---------------20150915---------------*/

 

<!DOCTYPE html>

<html >

<head>

<title> 飛天网事-纯CSS模拟时钟+js对时。 </title>

<meta charset="utf-8" />

<meta name="description" content="飛天网事，WEB前端开发，纯css3代码时钟精彩案例" />

<meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />

<meta name="author" content="R.tian @eduppp.cn 2015">

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 

<meta name="apple-mobile-web-app-capable" content="yes" />  

<meta name="apple-mobile-web-app-status-bar-style"  content="white" />  

<meta content="telephone=no" name="format-detection" /> 

<link rel="shortcut icon" type="image/x-icon" href="/web/css/eduppp.ico" />

<link rel="shortcut icon" type="image/x-icon" href="/images/logo4.gif" />

<link rel="apple-touch-icon" href="/images/logo.gif" />

<link rel="apple-touch-icon" sizes="72x72" href="/images/logo.gif" />

<link rel="apple-touch-icon" sizes="114x114" href="/images/logo.gif" />

<style type="text/css">

#main{width:375px;height:375px;margin:auto;}

#clockDial{/*--------底盘-------------*/

position:absolute;z-index:100;

width:401px;

height:401px;

background:#333;

border-radius:100%;

box-shadow:0 0 15px #000;

-webkit-transform:scale(0.6);

}

/*--------底盘--纵横定位线(调试用）-----------*/

/*#clockDial:before{

content:" ";

position:absolute;

width:3px;left:202px;

height:351px;top:26px;

background:#0000ff;

}

#clockDial:after{

content:" ";

position:absolute;

width:3px;left:202px;

height:351px;top:26px;

background:#0000ff;

transform:rotate(90deg);

}*/

#clockDial:before{/*--------底盘--边框外阴影-----------*/

content:" ";

position:absolute;

width:442px;left:-21px;

height:442px;top:-21px;

border-radius:100%;

box-shadow:0 0 30px #000;*/

}/**/

#clockDial:after{/*--------底盘--边框-----------*/

content:" ";

position:absolute;

width:440px;left:-20px;

height:440px;top:-20px;

border-radius:100%;

box-shadow:0 0 20px 10px #003366 inset;

}/**/

.Numerals{display:inline-block;z-index:3;}

.Numerals{/*--------10个刻度线 * 两端----主标签-------*/

position:absolute;

width:3px;height:351px;

top:11px;left:203px;

border-top:15px solid #fff;

border-bottom:15px solid #fff;

box-shadow:0 0 10px 1px #0000ff;

transform-origin:50% 50%;        

-webkit-transform-origin:50% 50%;        

}

.Numerals:before{/*--------10个刻度线 * 两端----副标签-------*/

content:" ";        

position:absolute;

width:3px;height:351px;

top:-15px;

border-top:15px solid #fff;

border-bottom:15px solid #fff;

transform:rotate(60deg);

-webkit-transform:rotate(60deg);

box-shadow:0 0 10px 1px #0000ff;

transform-origin:50% 50%;        

-webkit-transform-origin:50% 50%;        

}

.Numerals:after{/*--------10个刻度线 * 两端-----副标签------*/

content:" ";        

position:absolute;

width:3px;height:351px;

top:-15px;left:0px;

border-top:15px solid #fff;

border-bottom:15px solid #fff;

border-left:0px;

border-right:0px;

transform:rotate(120deg);

-webkit-transform:rotate(120deg);

box-shadow:0 0 10px 1px #0000ff;

transform-origin:50% 50%;        

-webkit-transform-origin:50% 50%;        

}

/*--------10个刻度线 * 3线 * 两端 ---方位-----------*/

.Numerals:nth-child(2){

transform:rotate(6deg);-webkit-transform:rotate(6deg);                

}

.Numerals:nth-child(3){

transform:rotate(12deg);-webkit-transform:rotate(12deg);        

}

.Numerals:nth-child(4){transform:rotate(18deg);-webkit-transform:rotate(18deg);        }

.Numerals:nth-child(5){transform:rotate(24deg);-webkit-transform:rotate(24deg);        }

.Numerals:nth-child(6){transform:rotate(30deg);-webkit-transform:rotate(30deg);        }

.Numerals:nth-child(7){transform:rotate(36deg);-webkit-transform:rotate(36deg);        }

.Numerals:nth-child(8){transform:rotate(42deg);        -webkit-transform:rotate(42deg);        }

.Numerals:nth-child(9){transform:rotate(48deg);        -webkit-transform:rotate(48deg);        }

.Numerals:nth-child(10){transform:rotate(54deg);-webkit-transform:rotate(54deg);        }

.Num{z-index:10;}

#clockFace{z-index:5;}

#pivot{z-index:11;}

#clockFace{/*--------表盘-----------*/

display:block;position:absolute;opacity:0.9;

top:30px;left:32px;

width:343px;height:343px;

background:#333;

border-radius:100%;

}

#clockFace:before{/*--------12/6刻度-----------*/

content:" ";

display:block;position:absolute;

width:7px;height:322px;left:50%;top:50%;

margin:-191px 0 0 -3px;

border-top:30px solid #fff;

border-bottom:30px solid #fff;

}

#clockFace:after{/*--------3/9刻度-----------*/

content:" ";

display:block;position:absolute;

width:7px;height:322px;left:50%;top:50%;

margin:-191px 0 0 -3px;

border-top:30px solid #fff;

border-bottom:30px solid #fff;

transform:rotate(90deg);

}

.Num{/*--------3、6、9、12数字位置-----------*/

z-index:9;

display:block;position:absolute;        

left:50%;top:50%;font-size:22pt;color:#fff;

}

.num3{margin:-15px 0 0 150px}

.num6{margin:130px 0 0 -5px}

.num9{margin:-15px 0 0 -155px}

.num12{margin:-165px 0 0 -10px}

/*--------其他数字位置-----------*/

.num3:before{content:"1";font-size:16pt;

margin:-140px 0 0 -70px;display:block;position:absolute;        }

.num3:after{content:"2";font-size:16pt;

margin:-110px 0 0 -10px;display:block;position:absolute;        }

.num6:before{content:"4";font-size:16pt;

margin:-60px 0 0 145px;display:block;position:absolute;        }

.num6:after{content:"5";font-size:16pt;

margin:-35px 0 0 85px;display:block;position:absolute;        }

.num9:before{content:"7";font-size:16pt;

margin:145px 0 0 70px;display:block;position:absolute;        }

.num9:after{content:"8";font-size:16pt;

margin:52px 0 0 12px;display:block;position:absolute;        }

.num12:before{content:"10";font-size:16pt;

margin:70px 0 0 -140px;display:block;position:absolute;        }

.num12:after{content:"11";font-size:16pt;

margin:-20px 0 0 -80px;display:block;position:absolute;        }

/*--------表轴原点--------------------------------------------*/

#pivot {

z-index:90;

display:block;position:absolute;        left:50%;top:50%;

margin:-5px 0 0 -2px;

width:11px;height:11px;

border-radius:5px;

background:#fff;

box-shadow:0 0 10px 1px #ff0 ;

}

/*----------------时针-------------------------------------------*/

#hourHand{/*--------时针：主线-----------*/

z-index:10;

display:block;position:absolute;        

left:50%;top:50%;margin:-100px 0 0 0;

width:7px;height:136px;

background:#ff0;        box-shadow:0 0 10px #000;

opacity:0.7;

transform-origin:50% 101px;

-webkit-transform-origin:50% 101px;

}

#hourHand:after{/*--------时针：头-----------*/

content:" ";display:block;position:absolute;        left:3px;top:-10px;

width:20px;height:20px;

border-radius:0px 0;

transform-origin:0 100%;

-webkit-transform-origin:0 100%;

transform:rotate(-45deg) skew(-20deg,-20deg);

-webkit-transform:rotate(-45deg) skew(-20deg,-20deg);

background:#ff0;

}

#hourHand:before{/*--------时针：尾-----------*/

content:" ";display:block;position:absolute;        left:2px;top:120px;

width:20px;height:20px;

border-radius:100% 0 100% 100%;

transform-origin:4px 100%;

-webkit-transform-origin:4px 100%;

transform:rotate(-45deg) ;

-webkit-transform:rotate(-45deg) ;

background:#ff0;box-shadow:0 0 10px #000;

}

/*---------------分针--------------------------------------------*/

#minuteHand{/*--------分针：主线-----------*/

z-index:10;

display:block;position:absolute;        

left:50%;top:50%;margin:-120px 0 0 1px;

width:5px;height:156px;

background:#0f0;        box-shadow:0 0 10px #000;

opacity:0.6;

transform-origin:50% 121px;

-webkit-transform-origin:50% 121px;

}

#minuteHand:after{/*--------分针：头-----------*/

content:" ";display:block;position:absolute;        left:2px;top:-10px;

width:20px;height:20px;

border-radius:0px 0;

transform-origin:0 100%;

-webkit-transform-origin:0 100%;

transform:rotate(-45deg) skew(-30deg,-30deg);

-webkit-transform:rotate(-45deg) skew(-30deg,-30deg);

background:#0f0;

}

#minuteHand:before{/*--------分针：尾-----------*/

content:" ";display:block;position:absolute;        left:2px;top:150px;

width:20px;height:20px;

border-radius:100% 0 100% 100%;

transform-origin:2px 100%;

-webkit-transform-origin:2px 100%;

transform:rotate(-45deg) ;

-webkit-transform:rotate(-45deg) ;

background:#0f0;box-shadow:0 0 10px #000;

}

/*-----------------秒针------------------------------------------*/

#secondHand{/*--------秒针：主线-----------*/

z-index:10;

display:block;position:absolute;        

left:50%;top:50%;margin:-140px 0 0 2px;

width:3px;height:176px;

background:#f00;        box-shadow:0 0 10px #000;

opacity:0.7;

transform-origin:50% 141px;

-webkit-transform-origin:50% 141px;

}

#secondHand:after{/*--------秒针：头-----------*/

content:" ";display:block;position:absolute;        left:2px;top:-10px;

width:30px;height:30px;

border-radius:5px 0;

transform-origin:0 100%;

-webkit-transform-origin:0 100%;

transform:rotate(-45deg) skew(-30deg,-30deg);

-webkit-transform:rotate(-45deg) skew(-30deg,-30deg);

background:#f00;

}

#secondHand:before{/*--------秒针：尾-----------*/

content:" ";display:block;position:absolute;        left:1px;top:180px;

width:20px;height:20px;

border-radius:100% 0 100% 100%;

transform-origin:2px 100%;

-webkit-transform-origin:2px 100%;

transform:rotate(-45deg) ;

-webkit-transform:rotate(-45deg) ;

background:#f00;box-shadow:0 0 10px #000;

}

/*--------动画:指针----(使用JavaScript脚本対时）-----------------------------------*/

/*        

#hourHand{        animation:anim_hr 43200s linear infinite;        }

#minuteHand{        animation:anim_min 3600s  steps(60) infinite;        }

#secondHand{        animation:anim_sec 60s steps(60) infinite;        }

@keyframes anim_sec{

from{transform:rotate(0deg) ;}

to{        transform:rotate(360deg) ;}

}

@keyframes anim_min{

to{        transform:rotate(360deg) ;}

}

@keyframes anim_hr{

to{        transform:rotate(360deg) ;}

}

*/

/*-----------------------------------------------------------*/

#millisecond{/*--------毫秒小盘-----------*/

z-index:9;

display:block;position:absolute;

left:50%;left:50%;

margin:220px 0 0 -38px;

width:80px;height:80px;

border:1px dashed #fff;

border-radius:100%;

background:#555;

opacity:0.3;

box-shadow:0 0 10px 1px #fff inset;

}

#millisecond:after{/*--------毫秒：指针----------*/

content:" ";

display:block;position:absolute;

margin:4px 0 0 37px;

width:3px;height:35px;

border:1px dashed #990099;

background:#9900cc;

border-radius:100%;

opacity:1.5;

}

#millisecond:after{/*--------毫秒：动画----------*/

transform-origin:50% 35px;

-webkit-transform-origin:50% 35px;

animation:anim_l 1s linear infinite;        

-webkit-animation:anim_l 1s linear infinite;        

}

@keyframes anim_l{

from{        transform:rotate(0deg) ;        -webkit-transform:rotate(0deg) ;}

to{        transform:rotate(360deg) ;        -webkit-transform:rotate(360deg) ;}

}

/*-----------------------------------------------------------*/

#logo{

position:absolute;z-index:8;

left:191px;top:80px;

display:inline;

color:#fff;

font-size:25px;

opacity:1;

}

#logo:before{

content:"eduppp.cn";

display:block;position:absolute;font-family:"方正舒体"        ;

left:50%;top:50%;margin:5px 0 0 -38px;

color:#fff;

opacity:0.8;

font-size:20px;

}

#logo:after{

content:"Copyright @R.tian 2015";

display:block;position:absolute;

margin:210px 0 0 -45px;

width:150px;

border:0px solid #cc3300;

color:#fff;

font-size:12px;

opacity:0.6;

}

#face{z-index:8;

position:absolute;

left:80px;

top:75px;

width:250px;

height:250px;

border:0px solid #09c;

background:#0099ff;

border-radius:40px;

border-radius:40px;

opacity:0.1;

}

#face:before{content:" ";

position:absolute;

width:250px;

height:250px;

border:0px solid #00c;

background:#0099ff;

transform:rotate(60deg);

border-radius:40px;

-webkit-transform:rotate(60deg);

}

#face:after{content:" ";

position:absolute;

width:250px;

height:250px;

border:0px solid #a9c;

background:#0099ff;

border-radius:40px;

transform:rotate(120deg);

-webkit-transform:rotate(120deg);

}

</style>

<script type="text/javascript">

//----使用Js控制动画时间，每秒对三个指针定位。

//----CSS3的动画animation，使用js对时后无法达到三个指针同步（0秒时，三针同时旋转）。

/**/

window.οnlοad=function() {//当文档加载完成时执行该代码。

var clock = new Clock();

clock.start();

};

function Clock() {

var d = new Date(); 

var h = d.getHours() % 12;

var m = d.getMinutes();

var s = d.getSeconds();

this.start = function() {

var clock = new Clock();

document.getElementById("secondHand").style.webkitTransform="rotate("+s*6+"deg)";

document.getElementById("minuteHand").style.webkitTransform="rotate("+m*6+"deg)";

document.getElementById("hourHand").style.webkitTransform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";

document.getElementById("secondHand").style.transform="rotate("+s*6+"deg)";

document.getElementById("minuteHand").style.transform="rotate("+m*6+"deg)";

document.getElementById("hourHand").style.transform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";

window.setTimeout(function() {clock.start();}, 500);

};

}

</script>

</head>

<body>

<div id="main" class="">

  <div id="clockDial" class="">

<ul>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Numerals"></li>

<li class="Num num3">3</li>

<li class="Num num6">6</li>

<li class="Num num9">9</li>

<li class="Num num12">12</li>

<li id="hourHand"></li>

<li id="minuteHand"></li>

<li id="secondHand"></li>

<li id="millisecond"></li>

<li id="clockFace"></li>

<li id="logo">♔</li>

<li id="pivot"></li>

<li id="face"></li>

</ul>

  </div>

 </div>

 </body>

</html>


rtian001
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抖音最火超炫酷旋转时钟
07-12
抖音最火超炫酷旋转时钟，快来下载吧。绝对源码
html+css罗盘式旋转时钟
qq_31695557的博客
02-08 738
罗盘式旋转时钟
html实现旋转时钟
路在前方
07-10 4157
旋转时钟 *{ margin:0; padding:0; background:#669; } html,body{ width:100%; height:100%; overflow: hidden; } #clock { position: relative; width: 100%; height: 100%; } .label{ display:inline-block; text-align: center;
旋转时钟
m0_67901663的博客
05-30 144
旋转时钟
分享一款比较好看的旋转时钟代码，效果就是本站侧边栏的时间显示！
最新发布
Yereron的博客
12-28 483
margin: 0;padding: 0;left: 0;opacity: 0;opacity: 1;
JS+CSS3圆形时钟走动特效网页设计，html+css3模拟时钟走动
02-15
JS+CSS3圆形时钟走动特效网页设计，html+css3模拟时钟走动，纯静态网页实现； 主要是用了transform属性，定时器setInterval动态改变旋转角度来达到时钟动态效果，源码分离了css、js和html，总共分为三个文件； 主要...
使用 HTML、CSS 和 JavaScript的模拟时钟案例代码
04-14
使用 HTML、CSS 和 JavaScript的模拟时钟案例代码
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
08-16
这是一个使用 HTML、CSS 和 JavaScript 的简单模拟时钟，在这里，我提供了所需的源代码，以便您可以复制代码并在您自己的工作中使用它。
JS-CSS-模拟时钟
02-21
JS-CSS-模拟时钟
jquery+css33时钟效果
06-12
简单的CSS搭配jquery实现的一款时间钟效果，js直接调用本地电脑时间，或者服务器时间，模拟时钟盘走向效果
表盘图源码
03-08
表盘图源码、可修改的表盘源码、通过修改XML 文件得到表盘样式。
jQuery html5旋转制作带指针转动的圆形时钟代码
11-10
jQuery html5旋转制作带指针转动的圆形时钟代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
qq_27939089的博客
07-12 1563
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码，非常好看，里面充分的利用了对jq+css的使用，希望对于各位程序猿有帮助！！！！
python罗盘时钟代码_jQuery+css3实现极具创意的罗盘旋转时钟效果源码
weixin_33472998的博客
01-30 1557
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}html{overflow:hidden;font-size:16px;}.clock-container{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%)...
如何编写旋转时钟（源代码）
QuackLand的博客
12-03 2822
html css js
HTML5之实现酷炫旋转时钟效果
NoviceZ的博客
07-06 1411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background: #000000; color: #666; font-size: 12px; ..
html表盘的代码,表盘.html
weixin_31559919的博客
06-07 426
canvas{border: 1px solid red;}您的浏览器不支持画布var box=document.getElementById("box");var pen=box.getContext("2d");pen.clearRect(0,0,box.width,box.height);pen.save();pen.translate(300,300);pen.arc(0,0,200,0,...
QT自定义简单表盘（完整代码）
dingjumin的博客
11-11 945
运行结果： widget.cpp #include "widget.h" #include "ui_widget.h" #include<QPainter> #include<QDebug> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); m_wgt_mileage =new QWidget(thi
使用JavaScript动态模拟时间钟
weixin_45539338的博客
06-17 1354
使用JavaScript实现一个动态时钟
罗盘时钟代码详细步骤html
07-01
罗盘时钟是一种利用HTML、CSS和JavaScript编写的交互式时钟，模拟罗盘指针的运动来显示时间。 详细步骤如下： 1. 创建一个HTML文件，并添加基本的结构和布局。可以使用div元素来分段组织页面的不同部分。 2. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值