Đoạn mã mẫu JavaScript miễn phí 15 cho trang web của bạn

Cập nhật: Ngày 29 tháng 2021 năm XNUMX / Bài viết của: WHSR Guest

Tiết lộ: WHSR hỗ trợ trình đọc. Khi bạn mua thông qua các liên kết của chúng tôi, chúng tôi có thể kiếm được hoa hồng.

JavaScript là được sử dụng ở mọi nơi trực tuyến những ngày này - để cải thiện tính tương tác của trang web, xác thực thông tin và / hoặc cải thiện triển vọng trang web.

JavaScript xuất hiện lần đầu tiên trong 1995 và đã đi một chặng đường dài kể từ đó về mặt được chấp nhận và cách sử dụng nó. Cú pháp được sử dụng trong JavaScript bị ảnh hưởng mạnh mẽ bởi C; nhưng Java, Pearl, Python và Scheme cũng đóng vai trò của nó.

Lời khuyên cho người mới bắt đầu JavaScrip: Những gì bạn cần biết?

Để bắt đầu, một vài điều cơ bản bạn cần biết là:

  • JavaScript có thể được tắt trong trình duyệt
  • JavaScript sẽ chạy mỗi khi trang được tải
  • JavaScript mất thời gian để tải trên kết nối Internet chậm
  • JavaScript vẫn được chạy từ các trang được lưu trữ
  • Bạn có thể lưu trữ JavaScript trong một trang web hoặc bên ngoài từ tệp .js
  • JavaScript hoàn toàn khác với Java

Điều quan trọng là phải hiểu rằng JavaScript thực sự sẽ dẫn đến thảm họa khi nó được sử dụng sai cách.

JavaScripts được cấu hình kém và được mã hóa cẩu thả sẽ làm chậm trang web của bạn và làm hỏng việc điều hướng trang web tổng thể. Điều này lại ảnh hưởng đến tỷ lệ quay lại của khách truy cập của bạn (do trải nghiệm người dùng không tốt) cũng như thứ hạng của công cụ tìm kiếm (do tỷ lệ phản hồi trang web chậm và bot thu thập thông tin). Để giúp xác thực trường hợp của tôi ở đây, hãy đặt mình vào vị trí của người xem. Nếu một trang web bạn đang truy cập tải chậm, khó điều hướng và nói chung là không hấp dẫn - bạn có quay lại trang web đó không? Tôi sẽ không.

Dưới đây là danh sách nhỏ những điều cần suy nghĩ khi thêm JavaScript vào trang web của bạn.

  • JavaScript có cần thiết để trang web hoạt động đúng không?
  • Trang web sẽ trông như thế nào nếu JavaScript bị chặn?
  • JavaScript sẽ làm hại hiệu suất máy chủ?
  • Việc thêm JavaScript có giúp di chuyển trang web của bạn theo hướng bạn muốn không?

Không, tôi không cố gắng làm bạn sợ với những điểm này.

Thực tế, đừng sợ sử dụng JavaScript trên trang web của bạn vì nó mang lại rất nhiều lợi ích và như đã đề cập, nó được đa số sử dụng. Điểm mấu chốt mà tôi đang cố gắng giải quyết ở đây là không chỉ tiếp tục thêm các tính năng JavaScript vào một trang web khi chúng không cần thiết. Một số trang web sẽ cần nhiều JavaScript hơn những trang còn lại; một số chỉ cần ít hơn - Chỉ vì một trang web đang làm điều đó không có nghĩa là bạn nên làm như vậy.

Phần thưởng miễn phí: 15 Đoạn mã JavaScript tuyệt vời cho trang web của bạn

Bây giờ, hãy đi xuống những thứ mà bạn đến đây - dưới đây là danh sách 15 đoạn mã JavaScript sẽ nâng cao trang web của bạn về cả chức năng hoặc hình thức. Mã sẽ được chia thành hai phần, phần đầu và phần thân hoặc tệp .js. Nếu không có tiêu đề phần nào được đưa ra thì nó không cần thiết cho đoạn trích cụ thể đó.

XUẤT KHẨU. Hiểu video HTML1

Mẫu nhanh

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

Đoạn mã JavaScript làm gì?

Đoạn mã nhỏ này sẽ ngăn trang web của bạn cố gắng hiển thị video mà trình duyệt không thể hỗ trợ, tiết kiệm băng thông và sức mạnh xử lý của bạn.

XUẤT KHẨU. Cookie JavaScript

Mẫu nhanh

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

    document.cookie= name + "=" + escape(value) +

        ((expires) ? "; expires=" + expires.toGMTString() : "") +

        ((path) ? "; path=" + path : "") +

        ((domain) ? "; domain=" + domain : "") +

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

    var begin = dc.indexOf("; " + prefix);

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

    var end = document.cookie.indexOf(";", begin);

    if (end == -1) {

        end = dc.length;

    }

    return unescape(dc.substring(begin + prefix.length, end));

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

            ((path) ? "; path=" + path : "") +

            ((domain) ? "; domain=" + domain : "") +

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

Đoạn mã JavaScript làm gì?

Đoạn mã này hơi dài nhưng rất hữu ích, nó sẽ cho phép trang web của bạn lưu trữ thông tin trên máy tính của người xem sau đó đọc nó tại một thời điểm khác. Đoạn mã này có thể được sử dụng theo nhiều cách khác nhau để hoàn thành các nhiệm vụ khác nhau.

XUẤT KHẨU. Tải trước hình ảnh của bạn

Mẫu nhanh

var images = new Array();

function preloadImages(){

    for (i=0; i 

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ ngăn trang web của bạn có khoảng thời gian khó xử đó khi nó chỉ hiển thị một phần của trang web; Điều này không chỉ có vẻ xấu mà còn không chuyên nghiệp. Tất cả bạn phải làm là thêm hình ảnh của bạn vào phần preloadImages và bạn đã sẵn sàng để cuộn.

XUẤT KHẨU. Xác thực thư điện tử

Mẫu nhanh

Cái đầu:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Cơ thể: Địa chỉ email:

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ xác thực rằng một địa chỉ e-mail được định dạng đúng được nhập vào một biểu mẫu, nó không thể đảm bảo rằng địa chỉ e-mail là có thật, không có cách nào để kiểm tra điều đó với JavaScript.

XUẤT KHẨU. Không nhấp chuột phải

Mẫu nhanh

function f1() {
  if(document.all) { return false; }
}
function f2(e) {
  if(document.layers || (document.getElementById &! document.all)) {
    if(e.which==2 || e.which==3) { return false; }
  }
}
if(document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = f1;
}
else {
  document.onmouseup = f2;
  document.oncontextmenu = f1;
}
document.oncontextmenu = new function("return false");

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ ngăn người xem không thể nhấp chuột phải vào trang của bạn. Điều này có thể không khuyến khích người dùng trung bình mượn hình ảnh hoặc mã từ trang web của bạn.

XUẤT KHẨU. Hiển thị báo giá ngẫu nhiên

Mẫu nhanh

Cái đầu:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Cơ thể: writeRandomQuote();

Đoạn mã JavaScript làm gì?

Ok, đây không phải là một đoạn mà tất cả các trang web sẽ sử dụng nhưng nó có thể được sử dụng để hiển thị nhiều hơn chỉ là các trích dẫn ngẫu nhiên. Bạn có thể thay đổi nội dung ok các trích dẫn thành bất cứ điều gì bạn muốn và có hình ảnh hoặc văn bản ngẫu nhiên được hiển thị ở bất cứ đâu trên trang web của bạn.

XUẤT KHẨU. Liên kết trước / tiếp theo

Mẫu nhanh

Trang trước | Trang tiếp theo

Đoạn mã JavaScript làm gì?

Đoạn mã này rất hay nếu bạn có nhiều trang trên một bài viết hoặc hướng dẫn. Nó sẽ cho phép người dùng duyệt giữa các trang một cách dễ dàng. Nó cũng nhỏ và nhẹ theo quan điểm tài nguyên.

XUẤT KHẨU. Đánh dấu trang

Mẫu nhanh

Thêm vào mục yêu thích

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ cho phép người dùng đánh dấu trang của bạn một cách dễ dàng; tất cả những gì họ phải làm là nhấp vào liên kết. Các tính năng nhỏ như thế này có thể tăng trải nghiệm tổng thể cho người xem của bạn.

XUẤT KHẨU. Liên kết trang in dễ dàng

Mẫu nhanh

Trang in

Đoạn mã JavaScript làm gì?

Liên kết nhỏ này sẽ cho phép quan điểm của bạn dễ dàng in trang của bạn. Nó sử dụng tính năng in nhanh đã được trình duyệt của bạn thiết lập và không sử dụng tài nguyên nào cho đến khi được nhấp.

XUẤT KHẨU. Hiển thị ngày định dạng

Mẫu nhanh

Cái đầu:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Cơ thể: showDate();

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ cho phép bạn hiển thị ngày hiện tại ở bất cứ đâu trên trang web của bạn và không cần phải cập nhật. Đơn giản chỉ cần đặt nó vào vị trí và quên nó.

XUẤT KHẨU. Dấu phẩy

Mẫu nhanh

Cái đầu:
function addCommas(num) {
  num += '';
  var n1 = num.split('.');
  var n2 = n1[0];
  var n3 = n1.length > 1 ? '.' + n1[1] : '';
  var temp = /(d+)(d{3})/;
  while (temp.test(n2)) {
    n2 = n2.replace(temp, '' + ',' + '');
  }
  var out = return n2 + n3;
  document.write(out);
}


Cơ thể: addCommas("4550989023");

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ được sử dụng chủ yếu bởi các trang web sử dụng số thường xuyên. Đoạn mã này sẽ giữ cho số của bạn trông giống nhau trên bảng. Tất cả bạn phải làm là sao chép dòng cơ thể nơi bạn muốn thêm một số và thay thế số đó bằng số của bạn.

XUẤT KHẨU. Nhận vùng hiển thị của trình duyệt

Mẫu nhanh

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ cho phép bạn có được chiều rộng và chiều cao của khu vực hiển thị trong trình duyệt lượt xem của bạn. Điều này sẽ cung cấp cho nhà thiết kế khả năng tạo và sử dụng các màn hình khác nhau dựa trên kích thước cửa sổ trình duyệt của người dùng.

XUẤT KHẨU. Chuyển hướng với độ trễ tùy chọn

Mẫu nhanh

setTimeout( "window.location.href =

'http://walkerwines.com.au/'", 5*1000 );

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ cho phép bạn chuyển hướng người xem của mình đến một trang khác và nó có tùy chọn đặt độ trễ. Việc sử dụng đoạn trích này khá tự giải thích và nó là một công cụ rất có giá trị để có trong vành đai của bạn.

XUẤT KHẨU. Phát hiện iPhone

Mâu

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

    if (document.cookie.indexOf("iphone_redirect=false") == -1) {

        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";

    }

}

Đoạn mã JavaScript làm gì?

Đoạn mã này sẽ cho phép bạn phát hiện xem người xem của bạn có đang sử dụng iPhone hoặc iPod cho phép bạn hiển thị nội dung khác nhau cho họ hay không. Đoạn mã này là vô giá với thị trường di động lớn đến mức nào và nó chỉ tiếp tục phát triển.

XUẤT KHẨU. In tin nhắn lên Thanh trạng thái

Mẫu nhanh

 
"; 
// --> 

Đoạn mã JavaScript làm gì?

Đoạn mã nhỏ này sẽ cho phép bạn in một tin nhắn đến thanh trạng thái. Bạn có thể hiển thị những tin tức gần đây hoặc quan trọng trong một khu vực sẽ thu hút sự chú ý của người dùng.

Tìm hiểu thêm:

Giới thiệu về khách WHSR

Bài viết này được viết bởi một người đóng góp khách mời. Quan điểm của tác giả dưới đây hoàn toàn là của riêng mình và có thể không phản ánh quan điểm của WHSR.