jquery通过数值改变球大小

电玩女神 2022-08-18 16:07 171阅读 0赞

在业务中遇到一个问题：在页面上显示一个球，且球的大小会应数字的大小而改变。

我们都知道 js是可以画圆（用css样式准备一个圆，如果addClass），但这并不是我们想要的。

于是笔者脑洞打开：用样式画一个球

效果图：

![Center][]

看到这里，是不是觉得笔者脑洞很大，用亮光使圆变成球。我也是没办法，被逼无奈才想出如此下策。是不是有那么一点像了。

css代码（省略了width , height , border-radius，在后面动态添加）：

.drawCircle {
    				font-weight: bold;
    				font-size: 20px;
    				color: rgba(255, 255, 255, 1);
    				text-align: center;
    				border:none;
    				background: radial-gradient(circle farthest-side at 50% 12%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 1%, rgba(255, 0, 0, 1) 100%);
    			}

js代码：

曾遇到一个问题，因为num有小数点，而class也是有点，容易是js选择器误判，可以添加前缀或者是用以上方法避免使用class。

业务中效果图（打上马赛克）：

![Center 1][]

转载请注明博客来源：[http://blog.csdn.net/qq\_19558705][http_blog.csdn.net_qq_19558705]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[Center]: /images/20220731/2693c198065a4fe79311c193969904a7.png
[Center 1]: /images/20220731/831be7a5d30142928589e373d74da4b0.png
[http_blog.csdn.net_qq_19558705]: http://blog.csdn.net/qq_19558705
[http_www.itit123.cn]: http://www.itit123.cn/