cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan code_jquery kesan bar kemajuan

jQuery melaksanakan code_jquery kesan bar kemajuan

WBOY
WBOYasal
2016-05-16 15:25:041411semak imbas

Dalam beberapa senario tertentu, menggunakan kesan bar kemajuan boleh meningkatkan kemesraan pengguna tapak web, membolehkan pengguna memahami kemajuan dan meningkatkan kesabaran mereka dengan kemajuan Jika tidak, ia boleh membawa kepada penutupan halaman secara langsung. yang akhirnya akan menyebabkan laman web kehilangan pengguna Berikut adalah kod kesan kemajuan yang dilaksanakan menggunakan jQuery. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery进度条效果代码</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style type="text/css">
#progress 
{
 background:white;
 height:20px;
 padding:2px;
 border:1px solid green;
 margin:2px;
}
#progress span 
{
 background:green;
 height:16px;
 text-align:center;
 padding:1px;
 margin:1px;
 display:block;
 color:yellow;
 font-weight:bold;
 font-size:14px;
 width:0%;
}
</style>
<script type="text/javascript"> 
 var progress_node_id = "progress"; 
 function SetProgress(progress) { 
 if (progress) { 
 $("#" + progress_node_id + " > span").css("width", String(progress) + "%"); 
 $("#" + progress_node_id + " > span").html(String(progress) + "%"); 
 } 
 } 
 var i = 0; 
 function doProgress() { 
 if (i > 100) { 
 alert("Progress Bar Finished!"); 
 return; 
 } 
 if (i <= 100) { 
 setTimeout("doProgress()", 500); 
 SetProgress(i); 
 i++; 
 } 
 } 
 $(document).ready(function() { 
 doProgress(); 
 }); 
</script>
</head>
<body>
<h1>jQuery实现进度条效果代码</h1>
<p>原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），刷新查看</p>
<div id="progress"><span></span></div>
</body>
</html>

Di atas ialah kod jQuery untuk melaksanakan kesan bar kemajuan saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan jquery

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js pelbagai kaedah untuk menentukan sama ada aplikasi tertentu dipasang pada kemahiran terminal_javascript mudah alihArtikel seterusnya：js pelbagai kaedah untuk menentukan sama ada aplikasi tertentu dipasang pada kemahiran terminal_javascript mudah alih

Artikel berkaitan

Lihat lagi