Hiển thị các bài đăng có nhãn JavaScript. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn JavaScript. Hiển thị tất cả bài đăng
Thứ Tư, 12 tháng 2, 2014
JavaScript - Testing Prototype
Kiểm tra thư viện JavaScript Framework - Prototype
Bao gồm cả thử nghiệm
Để kiểm tra một thư viện JavaScript, bạn cần phải bao gồm nó trong trang web của bạn.
Bao gồm một thư viện, sử dụng thẻ script với thuộc tính src thiết lập để URL của thư viện:
Bao gồm cả thử nghiệm
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/
prototype/1.7.1.0/prototype.js">
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/
prototype/1.7.1.0/prototype.js">
</script>
</head>
<body>
</body>
</html>
Nguyên mẫu mô tả
Nguyên mẫu cung cấp chức năng để làm cho lập trình HTML DOM dễ dàng hơn.
Như jQuery, Prototype có $ của nó () chức năng.
Các $ () chức năng chấp nhận HTML DOM yếu tố giá trị id (hoặc các yếu tố DOM), và cho biết thêm chức năng mới cho các đối tượng DOM.
Không giống như jQuery, Prototype không có phương pháp sẵn sàng () để thay thế cho sự window.onload (). Thay vào đó, thử nghiệm thêm phần mở rộng cho trình duyệt và DOM HTML.
Trong JavaScript, bạn có thể chỉ định một chức năng để xử lý các sự kiện cửa sổ tải:
The Way JavaScript:
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;
Các thử nghiệm tương đương là khác nhau:
The Way Prototype:
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
Event.observe () chấp nhận ba đối số:
- HTML DOM hoặc BOM (Browser Object Model) đối tượng bạn muốn để xử lý
- Trường hợp bạn muốn xử lý
- Các chức năng bạn muốn gọi
Kiểm tra thử nghiệm
Hãy thử ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/
prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/
prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
Thử nó cho mình »
Cũng cố gắng này:
Ví dụ
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/
prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/
prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
Thử nó cho mình »
Như bạn có thể nhìn thấy từ ví dụ trên, như jQuery, Prototype cho phép chain.
Chaining là một cách tiện dụng để thực hiện nhiều nhiệm vụ trên một đối tượng.
JavaScript - Testing jQuery
Thử nghiệm JavaScript Framework Thư viện - jQuery
Bao gồm jQuery
Để kiểm tra một thư viện JavaScript, bạn cần phải bao gồm nó trong trang web của bạn.
Bao gồm một thư viện, sử dụng thẻ script với thuộc tính src thiết lập để URL của thư viện:
Bao gồm jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
JQuery mô tả
Chức năng jQuery chính là $) chức năng (chức năng jQuery) (. Nếu bạn vượt qua các đối tượng DOM để chức năng này, nó sẽ trả về đối tượng jQuery, với jQuery thêm chức năng cho họ.
jQuery cho phép bạn chọn các yếu tố của bộ chọn CSS.
Trong JavaScript, bạn có thể gán một chức năng để xử lý các sự kiện tải của cửa sổ:
The Way JavaScript:
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
JQuery tương đương là khác nhau:
The Way jQuery:
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
Dòng cuối cùng của đoạn mã trên, vượt qua các tài liệu HTML DOM đối tượng jQuery: $ (document).
Khi bạn vượt qua đối tượng DOM để jQuery, jQuery trả về đối tượng jQuery mới quấn quanh các đối tượng DOM HTML.
Chức năng jQuery trả về một đối tượng jQuery mới, nơi sẵn sàng () là một phương pháp.
Kể từ khi chức năng là các biến trong JavaScript, myFunction có thể được thông qua như là một biến phương pháp sẵn sàng jQuery.
 | jQuery trả về một đối tượng jQuery, khác nhau từ các đối tượng DOM đã được thông qua. Các đối tượng jQuery có các tính chất và phương pháp, khác với các đối tượng DOM. Bạn không thể sử dụng tài sản DOM HTML và các phương pháp trên các đối tượng jQuery. |
|---|
Thử nghiệm jQuery
Hãy thử ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
Thử nó cho mình »
Cũng cố gắng này:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
Thử nó cho mình »
Như bạn có thể nhìn thấy từ ví dụ trên, jQuery cho phép chain.
Chaining là một cách tiện dụng để thực hiện nhiều nhiệm vụ trên một đối tượng.
JavaScript Libraries
JavaScript thư viện - jQuery, Prototype, MooTools.
Khung JavaScript (thư viện)
Lập trình tiên tiến JavaScript (đặc biệt là việc xử lý phức tạp của sự khác biệt trình duyệt), thường có thể rất khó khăn và tốn thời gian để làm việc với.
Để đối phó với những khó khăn, rất nhiều JavaScript (helper) thư viện đã được phát triển.
Các thư viện JavaScript thường được gọi là các khuôn khổ JavaScript.
Trong hướng dẫn này, chúng tôi sẽ có một cái nhìn tại một số các khuôn khổ phổ biến nhất JavaScript:
- jQuery
- Nguyên mẫu
- MooTools
Tất cả những khuôn khổ có chức năng nhiệm vụ JavaScript phổ biến như hình ảnh động, thao tác DOM, và xử lý Ajax.
Trong hướng dẫn này chúng tôi sẽ hướng dẫn bạn cách sử dụng chúng, để làm cho lập trình JavaScript dễ dàng hơn, an toàn hơn, và nhiều thú vị hơn.
jQuery
jQuery là khuôn khổ JavaScript phổ biến nhất trên Internet hiện nay.
Nó sử dụng bộ chọn CSS để truy cập và thao tác các phần tử HTML (DOM đối tượng) trên một trang web.
jQuery cũng cung cấp một giao diện người dùng đồng (giao diện người dùng) khuôn khổ và rất nhiều plug-in khác.
Nhiều người trong số các công ty lớn nhất trên jQuery sử dụng Web:
- Microsoft
- IBM
- Netflix
Nguyên mẫu
Nguyên mẫu là một thư viện JavaScript cung cấp một API đơn giản để thực hiện nhiệm vụ web phổ biến.
API là viết tắt của Application Programming Interface. Nó là một thư viện các tài sản và phương pháp cho các thao tác DOM HTML.
Nguyên mẫu tăng cường JavaScript bằng cách cung cấp các lớp học và thừa kế.
MooTools
MooTools cũng là một khuôn khổ mà cung cấp một API để làm cho lập trình JavaScript thông thường dễ dàng hơn.
MooTools cũng bao gồm một số hiệu ứng nhẹ và chức năng hình ảnh động.
Khung khác
Đây là một số các khuôn khổ khác không nằm trong tổng quan ngắn này:
YUI - Yahoo! User Interface Framework là một thư viện lớn bao gồm rất nhiều chức năng, từ các tiện ích JavaScript đơn giản để hoàn thành các vật dụng internet.
Ext JS - vật dụng tùy chỉnh để xây dựng các ứng dụng Internet phong phú.
Võ đường - Một bộ công cụ được thiết kế xung quanh gói cho các thao tác DOM, các sự kiện, vật dụng, và nhiều hơn nữa.
script.aculo.us - Mã nguồn mở khuôn khổ JavaScript cho hiệu ứng hình ảnh và hành vi giao diện.
UIZE - Widget, AJAX, DOM, mẫu, và nhiều hơn nữa.
CDN - Mạng Nội dung Giao hàng tận nơi
Bạn luôn muốn trang web của bạn để chạy càng nhanh càng tốt. Bạn muốn giữ kích thước của trang web của bạn càng nhỏ càng tốt, và bạn muốn trình duyệt để cache càng nhiều càng tốt.
Nếu nhiều trang web khác nhau sử dụng khuôn khổ JavaScript cùng, nó có ý nghĩa để lưu trữ các thư viện khuôn khổ tại một địa điểm chung cho tất cả các trang web để chia sẻ.
Một CDN (Giao hàng tận nơi Mạng Nội dung) giải quyết điều này. Một CDN là một mạng lưới các máy chủ có chứa các thư viện mã được chia sẻ. Google cung cấp một CDN miễn phí cho một số thư viện JavaScript, bao gồm:
- jQuery
- Nguyên mẫu
- MooTools
- Võ đường
- Yahoo! YUI
Sử dụng một thư viện khuôn khổ JavaScript trong trang web của bạn, chỉ bao gồm các thư viện trong một thẻ script:
Bao gồm jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</script>
Sử dụng Khung
Trước khi bạn quyết định sử dụng một khuôn khổ JavaScript cho các trang web của bạn, nó có thể là một ý tưởng tốt để kiểm tra khuôn khổ đầu tiên.
JavaScript khuôn khổ rất dễ dàng để kiểm tra. Bạn không cần phải cài đặt chúng trên máy tính của bạn, và không có chương trình cài đặt.
Thông thường bạn chỉ cần tham khảo một tập tin thư viện từ trang web của bạn.
Trong chương kế tiếp của hướng dẫn này chúng tôi sẽ hướng dẫn bạn qua một quá trình kiểm tra cho jQuery.
JavaScript Cookies
Cookie cho phép bạn lưu trữ thông tin người sử dụng trong các trang web.
Cookies là gì?
Cookies là dữ liệu, lưu trữ trong các tập tin văn bản nhỏ, trên máy tính của bạn.
Khi một máy chủ web đã gửi một trang web đến một trình duyệt, kết nối được đóng cửa, và các máy chủ quên tất cả mọi thứ về người dùng.
Cookie đã được phát minh để giải quyết vấn đề "làm thế nào để ghi nhớ thông tin về người sử dụng":
- Khi người dùng truy cập một trang web, tên của ông có thể được lưu trữ trong một cookie.
- Thời gian tiếp theo người dùng truy cập trang web, cookie "nhớ" tên của mình.
Cookie sẽ được lưu trong các cặp tên-giá trị như:
username=John Doe
Khi một yêu cầu trình duyệt một trang web từ một máy chủ, cookies thuộc trang được thêm vào
theo yêu cầu. Bằng cách này, máy chủ được các dữ liệu cần thiết để "nhớ" thông tin về người sử dụng.
Tạo ra một Cookie với JavaScript
JavaScript có thể tạo ra các cookie, đọc cookie và xóa các tập tin cookie với các tài sản document.cookie .
Với JavaScript, cookie có thể được tạo ra như thế này:
document.cookie="username=John Doe";
Bạn cũng có thể thêm một hạn sử dụng (UTC hoặc giờ GMT thời gian). Theo mặc định, các tập tin cookie sẽ bị xóa khi trình duyệt được đóng lại:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
Với một tham số đường dẫn, bạn có thể cho trình duyệt những gì con đường cookie thuộc về. Theo mặc định, các tập tin cookie thuộc về trang hiện tại.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Đọc một Cookie với JavaScript
Với JavaScript, cookie có thể được đọc như thế này:
var x = document.cookie;
| document.cookie sẽ trở lại tất cả các cookie trong một chuỗi giống như: cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị; |
|---|
Thay đổi một Cookie với JavaScript
Với JavaScript, bạn có thể thay đổi một cookie theo cùng một cách như bạn tạo ra nó:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Cookie cũ được ghi đè.
Xóa một Cookie với JavaScript
Xóa một cookie là rất đơn giản. Chỉ cần thiết lập các tham số hết hạn vào một ngày trôi qua:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
Lưu ý rằng bạn không cần phải chỉ định một giá trị cookie khi bạn xóa một tập tin cookie.
Cookie dây
Tài sản document.cookie trông giống như một chuỗi văn bản bình thường. Nhưng nó không.
Ngay cả khi bạn viết một chuỗi toàn bộ cookie document.cookie, khi bạn đọc nó ra một lần nữa, bạn chỉ có thể xem các cặp tên-giá trị của nó.
Nếu bạn đặt một cookie mới, cookies cũ không ghi đè. Cookie mới được thêm vào document.cookie, vì vậy nếu bạn đọc document.cookie một lần nữa bạn sẽ nhận được một cái gì đó như:
cookie1 = giá trị; cookie2 = giá trị;
Nếu bạn muốn tìm giá trị của một cookie sẽ được chỉ định, bạn phải viết một hàm JavaScript để tìm kiếm cho các giá trị cookie trong chuỗi cookie.
JavaScript Cookie Ví dụ
Trong ví dụ để làm theo, chúng ta sẽ tạo ra một cookie để lưu tên của một khách truy cập.
Lần đầu tiên một người truy cập đến trang web, ông sẽ được yêu cầu điền vào tên của mình. Tên này sau đó được lưu trữ trong một cookie.
Trong thời gian tới khách truy cập đến trang đó, ông sẽ nhận được một thông điệp chào mừng.
Ví dụ, chúng ta sẽ tạo ra 3 chức năng JavaScript:
- Một chức năng để thiết lập một giá trị cookie
- Một chức năng để có được một giá trị cookie
- Một chức năng để kiểm tra một giá trị cookie
Một chức năng để thiết lập một Cookie
Đầu tiên, chúng ta tạo ra một chức năng mà các cửa hàng tên của khách truy cập trong một biến cookie:
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Ví dụ giải thích:
Các thông số của hàm trên là tên của các tập tin cookie (CNAME), giá trị của cookie (cvalue), và số ngày cho đến khi các tập tin cookie nên hết hạn (exdays).
Chức năng đặt một cookie bằng cách cộng các cookiename, giá trị cookie, và hết hạn chuỗi.
Một chức năng để có được một Cookie
Sau đó, chúng tôi tạo ra một chức năng mà trả về giá trị của một cookie quy định:
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
Chức năng giải thích:
Lấy cookiename như tham số (CNAME).
Tạo ra một biến (tên) với các văn bản để tìm kiếm (CNAME + "=").
Chia document.cookie trên dấu chấm phẩy vào một mảng được gọi là ca (ca = document.cookie.split (';')).
Vòng lặp thông qua các ca mảng (i = 0; i <ca.length; i + +), và đọc mỗi giá trị cắt (c = ca [i] trim ().).
Nếu cookie được tìm thấy (c.indexOf (tên) == 0), trả về giá trị của cookie (c.substring (name.length, c.length).
Nếu cookie không tìm thấy, trở về "".
Một chức năng để kiểm tra một Cookie
Cuối cùng, chúng tôi tạo ra các chức năng để kiểm tra nếu một cookie được thiết lập.
Nếu cookie được thiết lập nó sẽ hiển thị một lời chào.
Nếu cookie không được thiết lập, nó sẽ hiển thị một hộp nhắc, yêu cầu tên của người sử dụng, và lưu trữ các tập tin cookie tên người dùng cho 365 ngày, bằng cách gọi hàm setCookie:
function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
Tất cả cùng nhau Bây giờ
Ví dụ
<!DOCTYPE html>
<html>
<head><script>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Welcome again " + user);
}
else
{
user = prompt("Please enter your name:","");
if (user!="" && user!=null)
{
setCookie("username",user,30);
}
}
}
</script></head>
<body onload="checkCookie()"></body>
</html>
Thử nó cho mình »
Ví dụ trên chạy checkCookie () chức năng khi tải trang.
JavaScript Timing Events
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript có thể được thực hiện trong các khoảng thời gian.
Này được gọi là thời gian sự kiện.
|
JavaScript Thời gian Sự kiện
Với JavaScript, nó có thể thực hiện một số mã ở thời gian khoảng thời gian xác định. Này được gọi là thời gian sự kiện.
Nó rất dễ dàng với các sự kiện thời gian trong JavaScript. Hai phương pháp chính được sử dụng là:
- setInterval () - thực hiện một chức năng, hơn và hơn nữa, khoảng thời gian quy định
- setTimeout () - thực hiện một chức năng, một lần, sau khi chờ đợi một số quy định của mili giây
Lưu ý: Các setInterval () và setTimeout () là cả hai phương pháp của đối tượng HTML DOM của Windows.
SetInterval () Phương pháp
Phương pháp setInterval () sẽ chờ đợi một số quy định của mili giây, và sau đó thực hiện một chức năng nhất định, và nó sẽ tiếp tục thực hiện các chức năng, một lần tại mỗi-khoảng thời gian nhất định.
Cú pháp
window.setInterval("javascript function",milliseconds);
Các window.setInterval () phương pháp có thể được viết không có tiền tố cửa sổ.
Tham số đầu tiên của setInterval () phải là một chức năng.
Tham số thứ hai chỉ ra độ dài của thời gian khoảng thời gian giữa mỗi lần thực hiện.
Lưu ý: Có 1.000 mili giây trong một giây.
Ví dụ
Cảnh báo "hello" mỗi 3 giây:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ chỉ cho bạn cách setInterval () phương pháp hoạt động, nhưng nó không phải là rất có thể bạn muốn cảnh báo một tin nhắn mỗi 3 giây.
Dưới đây là một ví dụ mà sẽ hiển thị thời gian hiện tại. Phương pháp setInterval () được sử dụng để thực hiện chức năng một lần mỗi 1 giây, giống như một chiếc đồng hồ kỹ thuật số.
Ví dụ
Hiển thị thời gian hiện tại:
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>
Thử nó cho mình »
Làm thế nào để ngăn chặn các Thực hiện?
Phương pháp clearInterval () được sử dụng để ngăn chặn hành thêm các chức năng quy định trong setInterval (phương pháp).
Cú pháp
window.clearInterval(intervalVariable)
Các window.clearInterval () phương pháp có thể được viết không có tiền tố cửa sổ.
Để có thể sử dụng phương pháp () clearInterval, bạn phải sử dụng một biến toàn cầu khi tạo phương pháp khoảng thời gian:
myVar=setInterval("javascript function",milliseconds);
Sau đó, bạn sẽ có thể để ngăn chặn sự thực thi bằng cách gọi clearInterval () phương pháp.
Ví dụ
Cùng ví dụ như trên, nhưng chúng tôi đã thêm một nút "Stop thời gian":
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>
Thử nó cho mình »
SetTimeout () Phương pháp
Cú pháp
window.setTimeout("javascript function",milliseconds);
Các window.setTimeout () phương pháp có thể được viết không có tiền tố cửa sổ.
Phương pháp setTimeout () sẽ chờ đợi số quy định của mili giây, và sau đó thực hiện các chức năng quy định.
Tham số đầu tiên của setTimeout () phải là một chức năng.
Tham số thứ hai chỉ ra bao nhiêu phần nghìn giây, từ bây giờ, bạn muốn thực hiện các tham số đầu tiên.
Ví dụ
Chờ 3 giây, sau đó cảnh báo "Xin chào":
<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
Thử nó cho mình »
Làm thế nào để ngăn chặn các Thực hiện?
Phương pháp clearTimeout () được sử dụng để ngăn chặn việc thực hiện các chức năng quy định trong setTimeout (phương pháp).
Cú pháp
window.clearTimeout(timeoutVariable)
Các window.clearTimeout () phương pháp có thể được viết không có tiền tố cửa sổ.
Để có thể sử dụng clearTimeout () phương pháp, bạn phải sử dụng một biến toàn cầu khi tạo phương pháp thời gian chờ:
myVar=setTimeout("javascript function",milliseconds);
Sau đó, nếu chức năng chưa được thực hiện, bạn sẽ có thể để ngăn chặn sự thực thi bằng cách gọi clearTimeout () phương pháp.
Ví dụ
Cùng ví dụ như trên, nhưng chúng tôi đã thêm một nút "Stop cảnh báo":
<!DOCTYPE html>
<html>
<body>
<p>Click the first button alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>
<script>
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
</script>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Bài đăng (Atom)