圆形div栏，用于评级html5 js(Circle div bar for rating html5 js)

嗨我在我的页面中使用了一个条形评级系统，它通过一个非常简单的PHP代码按百分比显示usear有多少分数：

if($points>50){

$level = "Full User";

$level_bar = "100%";

}

在加载时，条形显示100％填充另一种颜色。

问题现在它做了填充条形循环，我有想法用html5做，我失败了，任何想法如何做到这一点？

我试图让这个工作： 循环评级栏

Hi i was using a bar rating system in my page, it shows by percentage how many points does the usear has by a very simple php code Examle:

if($points>50){

$level = "Full User";

$level_bar = "100%";

}

And by the time of load the bar showed 100% filled with another color.

The problem now its doing the filled bar circular, i had the idea of doing it with html5 and i failed, any idea how to do it?

im trying to get this to work: Circular rating bar

原文：https://stackoverflow.com/questions/10892939

更新时间：2020-02-22 15:51

最满意答案

如果要显示不同的百分比，只需更改存储在canvas上的data-completeness属性中的值

百分比值可以写在画布内(通过fillText()函数)或写入另一个可以放在画布上的DOM元素(使用css)

A demo made with a canvas element : http://jsfiddle.net/x4pVy/

if you want to show a different percentage, just change the value stored on data-completeness attribute on canvas

the percentage value can be written inside the canvas (through fillText() function) or into another DOM element you could place over the canvas (with css)

相关问答

没有，但有新的 HTML5 DOM 规范，加多很多DOM属性和方法，可以关注一下。 还有数据本地存储也是HTML5一个新技术。

那么，元素返回的值或val()似乎只是所选最后一个文件的名称。 要解决这个问题，使用多变事件的性质可能是明智的做法： $('input:file[multiple]').change(

function(){

$('ul').append($('

').text($(this).val()));

});

JS Fiddle演示 。 并将名称输出到列表中(如示例中所示)，或者将最新值附加到数组中，或者可能使用/创建隐藏输入来存储文件名，因为您觉得最适合您的

...

他们两人之间的比较看看Sencha Touch或jQuery Mobile？ 。 如果你正在寻找更多的文档和支持，我会说去sencha。 For a comparision between the two of them look at Sencha Touch or jQuery Mobile?. I would say go sencha if you are looking for more documentation and support.

为了同时播放声音的多个实例，您需要创建该Audio元素的新副本。 一种方法是使用.cloneNode()方法并在每次按下空格键时播放克隆的音频。 this.Sounds["L_Explosion1"].cloneNode(true).play();

In order to play multiple instances of the sound at the same time, you will need to create a new copy of that Audio element.

...

“r”不是元素的属性，它是一个属性。 用这个： document.getElementById("cir").setAttribute("r", 2000);

"r" is no property of the element, it's an attribute. Use this: document.getElementById("cir").setAttribute("r", 2000);

不，Html + CSS + JavaScript过去被称为DHTML。 https://en.wikipedia.org/wiki/Dynamic_HTML HTML5本身就是一种标记语言。 https://en.wikipedia.org/wiki/HTML5 No, Html + CSS + JavaScript used to be called DHTML. https://en.wikipedia.org/wiki/Dynamic_HTML HTML5 itself is a mark

...

使用canvas元素制作的演示： http ： //jsfiddle.net/x4pVy/ 如果要显示不同的百分比，只需更改存储在canvas上的data-completeness属性中的值 百分比值可以写在画布内(通过fillText()函数)或写入另一个可以放在画布上的DOM元素(使用css) A demo made with a canvas element : http://jsfiddle.net/x4pVy/ if you want to show a different percen

...

以此答案为基础 $(function() {

var color1 = 'ff0000';

var color2 = '80ff00';

var ratio = 1 / $('.ratingEle').length;

var hex = function(x) {

x = x.toString(16);

return (x.length == 1) ? '0' + x : x;

};

$i=1;

$('.ratingEl

...

您可以通过http://amcharts.com实现几乎相同，这里是代码：

var chart;

var chartData = [{

category: "",

bad: 75,

moderate: 15,

good: 10

}];

AmCharts.rea

...

使用fabric.js来做到这一点，你的例子是结构。 这是你的解决方案:) - 15分钟编码http://jsfiddle.net/d9a9n5h7/