HTML5网速测试进度条效果代码下载



17 64 22



特效描述:HTML5 网速测试 进度条,HTML5网速测试进度条效果代码下载

代码结构

1. 引入CSS

<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">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src='js/do-in.js'></script>

3. HTML代码

<div class="zzsc-container">
	<div data-to-value='77' data-items-count='32' id="p1_barPie" class="barPie barPie--radio">
	  <span class="barPie__value">0</span>
	  <div class="barPie__ring">
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem31" value="100" hidden="hidden">
		<label for="p1_barPieItem31" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem30" value="96.875" hidden="hidden">
		<label for="p1_barPieItem30" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem29" value="93.75" hidden="hidden">
		<label for="p1_barPieItem29" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem28" value="90.625" hidden="hidden">
		<label for="p1_barPieItem28" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem27" value="87.5" hidden="hidden">
		<label for="p1_barPieItem27" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem26" value="84.375" hidden="hidden">
		<label for="p1_barPieItem26" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem25" value="81.25" hidden="hidden">
		<label for="p1_barPieItem25" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem24" value="78.125" hidden="hidden">
		<label for="p1_barPieItem24" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem23" value="75" hidden="hidden">
		<label for="p1_barPieItem23" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem22" value="71.875" hidden="hidden">
		<label for="p1_barPieItem22" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem21" value="68.75" hidden="hidden">
		<label for="p1_barPieItem21" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem20" value="65.625" hidden="hidden">
		<label for="p1_barPieItem20" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem19" value="62.5" hidden="hidden">
		<label for="p1_barPieItem19" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem18" value="59.375" hidden="hidden">
		<label for="p1_barPieItem18" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem17" value="56.25" hidden="hidden">
		<label for="p1_barPieItem17" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem16" value="53.125" hidden="hidden">
		<label for="p1_barPieItem16" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem15" value="50" hidden="hidden">
		<label for="p1_barPieItem15" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem14" value="46.875" hidden="hidden">
		<label for="p1_barPieItem14" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem13" value="43.75" hidden="hidden">
		<label for="p1_barPieItem13" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem12" value="40.625" hidden="hidden">
		<label for="p1_barPieItem12" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem11" value="37.5" hidden="hidden">
		<label for="p1_barPieItem11" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem10" value="34.375" hidden="hidden">
		<label for="p1_barPieItem10" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem9" value="31.25" hidden="hidden">
		<label for="p1_barPieItem9" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem8" value="28.125" hidden="hidden">
		<label for="p1_barPieItem8" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem7" value="25" hidden="hidden">
		<label for="p1_barPieItem7" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem6" value="21.875" hidden="hidden">
		<label for="p1_barPieItem6" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem5" value="18.75" hidden="hidden">
		<label for="p1_barPieItem5" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem4" value="15.625" hidden="hidden">
		<label for="p1_barPieItem4" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem3" value="12.5" hidden="hidden">
		<label for="p1_barPieItem3" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem2" value="9.375" hidden="hidden">
		<label for="p1_barPieItem2" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem1" value="6.25" hidden="hidden">
		<label for="p1_barPieItem1" class="barPie__ring__item"></label>
		<input type="radio" name="barPieRadioGroup" id="p1_barPieItem0" value="3.125" hidden="hidden">
		<label for="p1_barPieItem0" class="barPie__ring__item"></label>
	  </div>
	</div>
</div>
<script>
(function (ELEMENT) {
	ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
	ELEMENT.closest = ELEMENT.closest || function closest(selector) {
		var element = this;
		while (element) {
			if (window.CP.shouldStopExecution(1)) {
				break;
			}
			if (element.matches(selector))
				break;
			element = element.parentElement;
		}
		window.CP.exitedLoop(1);
		return element;
	};
}(Element.prototype));
var barPie = {
	onChnage: function (e) {
		if (e.target.name != 'barPieRadioGroup')
			return;
		var scopeElm = 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 () {
		var that = 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;
		var valueElm = scopeElm.querySelector('.barPie__value'), inital = +valueElm.innerHTML, delta = value - inital, doin;
		function step(t, elapsed) {
			t = 1 - Math.exp(-t * 7);
			var value = 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() {
	var currentBarPie, toValue, itemsCount;
	function step(t) {
		var itemIdx = 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:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 其他 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到