Ứng dụng javascript: code nhỏ hữu ích hướng dẫn bạn triển khai các đoạn code nhỏ, ngắn để tạo nên các chức năng hữu ích trong trang web.
Nạp lại trang web bằng javascript
Bạn có thể tạo ra 1 nút hoặc 1 link. Để khi user nhắp vào thì trang web sẽ được nạp lại. Code đơn giản thôi, đây nè:
<!-- dongho.html -->
<button type="button" onclick="location.reload()">
Nạp lại
</button>
<a href="#" onclick="location.reload();">
Nạp lại đi
</a>
Tự động nạp lại trang web sau 1 khoảng thời gian
Trang web hiện ra cho user xem, khoảng 30 phút sau bạn muốn nó tự động được nạp lại (để nếu có thông tin mới thì hiện ra) . Code 1 dòng thôi , nó đây:
<!-- dh.html -->
<script>
setTimeout("location.reload()", 1800000);
</script>Hiện thông báo và chuyển trang sau 1 khoảng thời gian
Thế nào bạn cũng dùng tới chức năng này: hiện ra 1 thông báo gì đó, rồi 1 khoảng thời gian sau sẽ tự động chuyển đến trang web khác như hình dưới đây.
Thực hiện code như sau sẽ được như mong muốn:
<style>
.thongbao {
width: 600px; margin: 50px auto;
border: 2px solid darkolivegreen;
font-size: 20px; text-align: center;
}
</style>
<body>
<div class="thongbao">
<h3> Đơn hàng đã được ghi nhận! Xin cảm ơn quý khách!</h3>
<p>Quay lại trang chủ sau <span id="sogiay">10</span> giây</p>
</div>
</body>
<script>
function demgiamdan(){
sogiay--;
if (sogiay>0){
document.getElementById("sogiay").innerHTML=sogiay;
}
else {
document.location="index.html";
}
}
</script>
<script>
let sogiay = 10;
setInterval( demgiamdan, 1000);
</script>Quay lại trang trước bằng javascript
Nếu muốn trong trang web của mình có 1 nút hoặc 1 link quay lại trang trước đó. Rất đơn giản với javaascript bạn ơi. Xem 2 cách dưới đây
<!-- index.html và dangky.html -->
<a href="#" onclick="history.back()">
Trở lại
</a>
<button type="button" onclick="history.back()" >
Trở lại
</button>
In ra giấy bằng bằng javascript
Khi cần có 1 nút trong trang web, để cung cấp chức năng in ra giấy? Một lệnh Javascript đơn giản thôi, nó đây nhé:
<!-- chiecKepToc.html -->
<button type="button" onclick="window.print()">
In ra giấy
</button>
<a href="#" onclick="window.print()">
In ra giấy
</a>
Nút ẩn hiện form
Ứng dụng javascript: code nhỏ hữu ích còn nhiều nha, bây giờ dùng javascript để ẩn hiện form, thực hiện theo để thấy nó dễ ợt hà:
<!-- BaCauHoi.html -->
<style>
#formyk {
width: 600px; border: 2px solid darkolivegreen;
padding-left: 20px }
#formyk label { display: block;}
#formyk .txt {
width: 95%; border: 1px solid darkorange; padding: 5px;}
#ykiencuaban {
color:darkorange; font-weight: bold; text-decoration: none;}
#ykiencuaban:hover { text-decoration: underline;}
</style>
<a href="#" id="ykiencuaban" onclick="ykiencuaban()">
Ý kiến của bạn
</a>
<form id="formyk">
<p>
<input type="text" class="txt" id="tendangnhap" placeholder="Họ tên của bạn"/>
</p>
<p>
<input type="text" class="txt" id="email" placeholder="Email của bạn"/>
</p>
<p>
<textarea class="txt" id="noidung" rows="5" placeholder="Nội dung"></textarea>
</p>
<p>
<button type="submit">Lưu ý kiến</button>
</p>
</form>
<script>
function ykiencuaban(){
let frm = document.getElementById("formyk");
if (frm.style.display=="none") frm.style.display="block";
else frm.style.display="none";
return false;
}
</script>Đổi số cột tin trong trang tin
a. Tạo html danh sách tin
<h2 id="dongtieude">NGHỆ THUẬT SỐNG </h2>
<div id="listtin">
<div class="tin">
<h4>Con lừa chở tượng</h4>
<img src="images/t1.jpg" align="left">
<p>Điều bất hạnh lớn nhất trong đời người chính là không nhận thức được giá trị của bản thân để rồi suốt đời theo đuổi những ước vọng xa rời, phi thực tế và cuối cùng nhận lấy kết cục thảm hại.</p>
</div>
<div class="tin">
<h4>Vinh quang nằm trong nỗ lực</h4>
<img src="images/t2.jpg" align="left">
<p>Thời cổ đại Ấn Độ, trẻ em đều được đến những trường gọi là Gurukul. Trường học này hoạt động giống như những trường nội trú hiện nay. Khi tới đây, ngoài việc học, các em phải làm việc vặt...</p>
</div>
<div class="tin">
<h4>Chiếc kẹp tóc</h4>
<img src="images/t3.jpg" align="left">
<p>Quốc vương nọ có bảy nàng công chúa xinh đẹp. Mái tóc dài và đen nhánh của họ nức tiếng xa gần nên nhà vua đã tặng cho mỗi người họ một trăm chiếc cặp tóc vô cùng lộng lẫy xinh đẹp.</p>
</div>
<div class="tin">
<h4>Thức dậy sớm hơn 10 phút</h4>
<img src="images/t4.jpg" align="left">
<p>Có một người đàn ông được gia đình sắp xếp xem mắt một cô gái môn đăng hộ đối, gia cảnh vô cùng phù hợp, chưa kể tới điều kiện cá nhân của người phụ nữ đó cũng không tồi ...</p>
</div>
<div class="tin">
<h4>Ba câu hỏi có giá trị của người Nhật</h4>
<img src="images/t5.jpg" align="left">
<p>Địa ngục khác thiên đường ở một điểm duy nhất, đó là nó có sự thống trị của lòng tham và sự ích kỷ. Hai điều này sẽ dẫn đến vô số những rắc rối và bất hạnh.</p>
</div>
<div class="tin">
<h4>Một số nguyên tắc khi đi làm</h4>
<img src="images/t6.jpg" align="left">
<p>Nếu làm hơn 2 năm mà không có gì phát triển, về kiến thức kỹ năng chức vụ thu nhập, thì hãy coi lại bản thân đã cố gắng hết sức chưa? Nếu đã cố thì nên tìm công ty mới vì nơi đó không phù hợp với bạn.</p>
</div>
<div class="tin">
<h4>Thêm 1 công trình khảo cứu về Truyện Kiều</h4>
<img src="images/t7.jpg" align="left">
<p>Đó là cuốn Truyện Kiều - Bản Duy Minh Thị 1872 do An Chi phiên âm, chú giải và thảo luận. Sách dày 600 trang khổ lớn kèm nhiều phụ bản đẹp.</p>
</div>
<div class="tin">
<h4>Có gì 'Bên trong bộ não của Bill Gates'?</h4>
<img src="images/t8.jpg" align="left">
<p>Bill Gates không xa lạ với thế giới phim ảnh, có hàng chục phim về ông. Nhưng trong thập niên vừa qua, ông xuất hiện dày đặc với vai trò nhà hoạt động nhân đạo.
</p>
</div>
<div class="tin">
<h4>Vũ Đức Sao Biển - đa tài và khiêm tốn</h4>
<img src="images/t9.jpg" align="left">
<p>Hay tin nhạc sĩ Sao Biển qua đời, nhiều bạn bè đồng nghiệp nhớ lại những tháng ngày cùng cộng sự và mối giao tình với ông, nổi bật là hình ảnh nghệ sĩ đa tài và khiêm tốn.</p>
</div>
<div class="tin">
<h4>Ký ức Sài Gòn trong lòng bàn tay</h4>
<img src="images/t10.jpg" align="left">
<p>Có ai ngờ ký ức Sài Gòn có thể thu bé lại vừa khéo trong lòng bàn tay nhưng vẫn đầy đủ, chân thật đến từng chi tiết, không khỏi khiến người ta bồi hồi, thương nhớ.</p>
</div>
<div class="tin">
<h4>Sài Gòn rộng lượng</h4>
<img src="images/t11.jpg" align="left">
<p>Tính hào sảng của người Sài Gòn có từ thời khai sinh lập địa, càng ngày càng được chia sẻ và mang lại cho cộng đồng những câu chuyện dễ thương, xúc động có sức lan tỏa.</p>
</div>
<div class="tin">
<h4>Bảo tàng giảm giá vé tham quan</h4>
<img src="images/t12.jpg" align="left">
<p>Khách tham quan rất thưa là tình hình chung của các bảo tàng sau thời điểm giãn cách xã hội. Đây là một thực tế trái ngược so với cùng kỳ năm ngoái.</p>
</div>
</div>b. Định dạng danh sách tin với grid
#listtin {
display: grid; grid-template-columns: 33.3% 33.3% 33.3%;
}
#listtin .tin { border: 2px solid darkorange; margin: 10px; }
#listtin .tin img { height: 250px; width: 100%; }
#listtin .tin h4 { color: deeppink; margin: 10px; font-size: 20px; }
#listtin .tin p {
color: darkblue; margin: 10px; text-align: justify;
line-height: 150%; font-size: 20px;
}
h2#dongtieude {
background: darkslategray; color: white;
padding: 7px 0 7px 30px;
}
h2#dongtieude{ position: relative;}
#doicot { position: absolute; right: 10px; color: white}
#doicot a {
text-decoration: none; margin-right: 10px; color:yellow;
font-weight: 300;
}c. Thêm các link để đổi số cột
– Code trong tag h2:
<span id="doicot">
<a href="#" onclick="doiCot(2)">2 cột</a>
<a href="#" onclick="doiCot(3)">3 cột</a>
<a href="#" onclick="doiCot(4)">4 cột</a>
</span>– Định dạng css
h2#dongtieude{ position: relative;}
#doicot { position: absolute; right: 10px; color: white}
#doicot a {
text-decoration: none; margin-right: 10px; color:yellow;
font-weight: 300;
}– Định nghĩa hàm đổi số cột
<script>
function doiCot(socot){
if (socot==2)
document.getElementById("listtin").style.gridTemplateColumns= "50% 50%";
if (socot==3)
document.getElementById("listtin").style.gridTemplateColumns= "33.3% 33.3% 33.3%";
if (socot==4)
document.getElementById("listtin").style.gridTemplateColumns= "25% 25% 25% 25%";
}
</script>Ứng dụng javascript: code nhỏ hữu ích đã hướng dẫn bạn thực hiện một số đoạn code nhỏ mà chắc chắn bạn sẽ dùng khi phát triển các ứng dụng web, hãy thực hiện thử nhé.
Mời xem thêm các bài sau :
