CSS+JS는 그라데이션으로 진행률 표시줄을 만듭니다.-PHP开发-php.cn

집

php教程

PHP开发

CSS+JS는 그라데이션으로 진행률 표시줄을 만듭니다.

Dec 16, 2016 pm 04:50 PM

CSS에서 실행되어 진행률 표시줄을 그라데이션 색상으로 아름답게 만드는 웹페이지 진행률 표시줄입니다. Tongjin은 CSS를 제어하여 진행률 표시줄의 배경을 적시에 타일링합니다. 진행률 표시줄을 계속해서 웹페이지에 적용해야 합니다.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS+JS打造带渐变的进度条&lt;/title&gt;
&lt;style&gt;
#load{width:500px;height:25px;border:1px #000 solid;}
#loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);}
#loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;load&quot;&gt;&lt;div id=&quot;loading&quot;&gt;&lt;/div&gt;&lt;div id=&quot;loadtext&quot;&gt;1%&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
var i=0;
function test(){
	i++;
	document.getElementById(&quot;loading&quot;).style.width = i + &quot;%&quot;;
	document.getElementById(&quot;loadtext&quot;).innerText = i + &quot;%&quot;;
	if(i&lt;100)setTimeout(&quot;test()&quot;,200);
}
setTimeout(&quot;test()&quot;,200);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

CSS+JS를 사용하여 그라데이션이 있는 진행률 표시줄 생성과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.