<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>HTML5网速测试进度条代码</title>
<link rel="stylesheet" type="text/css"href="css/normalize.css" />
<link rel="stylesheet"type="text/css" href="css/default.css">
<link rel="stylesheet"type="text/css" href="css/styles.css">
<!--[if IE]>
<scriptsrc="//www.shaxiangift.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<divclass="zzsc-container">
<divdata-to-value='77' data-items-count='32' id="p1_barPie"class="barPie barPie--radio">
<spanclass="barPie__value">0</span>
<div class="barPie__ring">
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem31" value="100"hidden="hidden">
<labelfor="p1_barPieItem31"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem30" value="96.875"hidden="hidden">
<labelfor="p1_barPieItem30"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem29" value="93.75"hidden="hidden">
<labelfor="p1_barPieItem29"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem28" value="90.625"hidden="hidden">
<labelfor="p1_barPieItem28"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem27" value="87.5"hidden="hidden">
<labelfor="p1_barPieItem27" class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem26" value="84.375"hidden="hidden">
<labelfor="p1_barPieItem26"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup" id="p1_barPieItem25"value="81.25" hidden="hidden">
<labelfor="p1_barPieItem25"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem24" value="78.125"hidden="hidden">
<labelfor="p1_barPieItem24" class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem23" value="75"hidden="hidden">
<labelfor="p1_barPieItem23"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem22" value="71.875"hidden="hidden">
<labelfor="p1_barPieItem22"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem21" value="68.75"hidden="hidden">
<labelfor="p1_barPieItem21"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem20" value="65.625"hidden="hidden">
<labelfor="p1_barPieItem20"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem19" value="62.5" hidden="hidden">
<labelfor="p1_barPieItem19"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem18" value="59.375"hidden="hidden">
<labelfor="p1_barPieItem18"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem17" value="56.25"hidden="hidden">
<labelfor="p1_barPieItem17"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem16" value="53.125"hidden="hidden">
<labelfor="p1_barPieItem16"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem15" value="50"hidden="hidden">
<labelfor="p1_barPieItem15"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem14" value="46.875"hidden="hidden">
<labelfor="p1_barPieItem14"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem13" value="43.75"hidden="hidden">
<labelfor="p1_barPieItem13" class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem12" value="40.625"hidden="hidden">
<labelfor="p1_barPieItem12"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup" id="p1_barPieItem11"value="37.5" hidden="hidden">
<labelfor="p1_barPieItem11"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem10" value="34.375"hidden="hidden">
<labelfor="p1_barPieItem10" class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem9" value="31.25"hidden="hidden">
<labelfor="p1_barPieItem9"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem8" value="28.125"hidden="hidden">
<labelfor="p1_barPieItem8"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem7" value="25"hidden="hidden">
<labelfor="p1_barPieItem7"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem6" value="21.875"hidden="hidden">
<labelfor="p1_barPieItem6"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem5" value="18.75"hidden="hidden">
<labelfor="p1_barPieItem5"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem4" value="15.625"hidden="hidden">
<labelfor="p1_barPieItem4"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem3" value="12.5"hidden="hidden">
<labelfor="p1_barPieItem3"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem2" value="9.375"hidden="hidden">
<labelfor="p1_barPieItem2"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup"id="p1_barPieItem1" value="6.25"hidden="hidden">
<labelfor="p1_barPieItem1"class="barPie__ring__item"></label>
<inputtype="radio" name="barPieRadioGroup" id="p1_barPieItem0"value="3.125" hidden="hidden">
<labelfor="p1_barPieItem0"class="barPie__ring__item"></label>
</div>
</div>
</div>
<scriptsrc='js/stopExecutionOnTimeout.js?t=1'></script>
<scriptsrc='js/do-in.js'></script>
<script>
(function (ELEMENT) {
ELEMENT.matches= ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector ||ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
ELEMENT.closest= ELEMENT.closest || function closest(selector) {
varelement = this;
while(element) {
if(window.CP.shouldStopExecution(1)) {
break;
}
if(element.matches(selector))
break;
element= element.parentElement;
}
window.CP.exitedLoop(1);
returnelement;
};
}(Element.prototype));
var barPie = {
onChnage:function (e) {
if(e.target.name != 'barPieRadioGroup')
return;
varscopeElm = e.target.closest('.barPie--radio');
barPie.update(scopeElm,+e.target.value);
if(!scopeElm.active)
scopeElm.querySelector('.barPie__ring').lastElementChild.addEventListener('click',barPie.clickToNull);
scopeElm.active= 1;
},
clickToNull:function () {
varthat = this;
if(this.previousElementSibling.checked)
setTimeout(function() {
that.previousElementSibling.checked= false;
that.closest('.barPie--radio').querySelector('.barPie__value').innerHTML= '0';
},0);
},
update:function (scopeElm, value, speed, extraStep) {
if(!scopeElm)
return;
varvalueElm = scopeElm.querySelector('.barPie__value'), inital =+valueElm.innerHTML, delta = value - inital, doin;
functionstep(t, elapsed) {
t= 1 - Math.exp(-t * 7);
varvalue = delta * t + inital, remainder = value % 1;
if(t > 0.99 && (remainder > 0.9 || remainder < 0.01)) {
value= Math.round(value);
doin.step= function () {
};
}else
value= value.toFixed(remainder ? 1 : 0);
valueElm.innerHTML= value;
if(extraStep)
extraStep(t);
}
if(!valueElm.doin) {
doin= new Doin(step, speed || 0.33);
valueElm.doin= doin;
}else
doin= valueElm.doin;
doin.step= step;
doin.run();
}
};
document.addEventListener('change',barPie.onChnage);
var barPies =document.querySelectorAll('.barPie');
setTimeout(lazyCount, 1500);
function lazyCount() {
varcurrentBarPie, toValue, itemsCount;
functionstep(t) {
varitemIdx = Math.round(itemsCount * (toValue / 100) * t);
document.getElementById(currentBarPie.id+ 'Item' + itemIdx).checked = true;
}
for(var i = barPies.length; i--;) {
if(window.CP.shouldStopExecution(2)) {
break;
}
currentBarPie= barPies[i];
toValue= currentBarPie.dataset.toValue;
if(toValue) {
itemsCount= currentBarPie.dataset.itemsCount;
barPie.update(currentBarPie,toValue, 1.5, step);
}
}
window.CP.exitedLoop(2);
}
</script>
<div style="text-align:center;margin:50px0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服
