Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > บทความจากสมาชิก > สร้าง Progress bar ด้วย Css

Clound SSD Virtual Server

สร้าง Progress bar ด้วย Css

สร้าง Progress bar ด้วย Css

งานนี้เราจะมาสร้าง Progress bar ด้วย Css เพิ่มลูกเล่นให้มันด้วย javascript ครับ

เริ่มแรกเลย Css

CSS

<style>
.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>

ต่อมาด้วย HTML

HTML

<div class="graph">
<strong id="progress" class="bar" style="width: 0%;"><span id="val">0</span></strong>
</div>

ท้ายสุด จาวาสคริป

Javascript

<script>
function setProgess()
{
var currentWidth = parseInt(document.getElementById("progress").style.width);
var newWidth = currentWidth+1;

if(newWidth <= 100)
{
document.getElementById("progress").style.width = newWidth+"%";
document.getElementById("val").innerHTML = newWidth+"%";
setTimeout("setProgess()",100);
}
}
setProgess();
</script>

Output

Progressbar

Progressbar

Reference : http://applestooranges.com/blog/post/css-for-bar-graphs/

Share


	By :	A-mac
	Article :	บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
	Score Rating :
	Create Date :	2009-07-31
	Download :	No files

Sponsored Links

Comunity Forum

Free Web Script

Jobs Freelance

Free Uploads

Free Web Hosting

Free Tools

สอน PHP ผ่าน Youtube ฟรี

สอน Android การเขียนโปรแกรม Android

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน iOS การเขียนโปรแกรม iPhone, iPad

สอน Java การเขียนโปรแกรม ภาษา Java

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

สอน JSP การเขียนโปรแกรม ภาษา Java

สอน .Net การเขียนโปรแกรม ภาษา .Net

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว

Hit Link

นำเข้าสินค้าจากจีน

เฟอร์นิเจอร์

ของพรีเมี่ยม

ปากกา

แฟลชไดร์ฟ

กระบอกน้ำ

แลกเปลี่ยน Exchange Link

Load balance : Server 03