Cùng Học IT

Showing posts with label CSS. Show all posts

[ JavaScript ] Một số đoạn code JavaScript hữu ích cho Web và Blog

1. Tạo nút Back To Top (trở về đầu trang) cho Blogspot.

Tiện ích này rất hữu ích cho các trang có nội dung dài.

- Bước 1: vào mục Mẫu >> Chỉnh sửa HTML
Thêm đoạn code sau vào trước thẻ </body> (Để vào sau <head> cũng được nhưng nên để code cuối trang vì ta sẽ để load sau cùng):

<style type='text/css'>
#bttop{

border:1px solid

#4adcff;background:

#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:

#fff;font-size:11px;font-weight:900;line-height: 25px;

}

#bttop:hover{border:1px solid #32cd32;background:#bada55;

}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='https://backlinkjs.googlecode.com/files/min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){

if($(this).scrollTop()!=0){

$('#bttop').fadeIn();

}else{$('#bttop').fadeOut();

}

});

$('#bttop').click(function(){

$('body,html').animate({scrollTop:0},800);

});

</script>

Chú ý: Ở giữa 2 thẻ <style type='text/css'> và </style> là đoạn css định hình dạng cho nút Back to Top, các bạn tùy chỉnh thoải mái. Dòng code màu lam là thư viện Jquery, nếu có rồi thì các bạn nên xóa nó đi. BACK TO TOP các bạn thay bằng gì cũng được (GO TOP chẳng hạn).
Bạn có thể download file min.js [tại đây - click bỏ qua quảng cáo để download] sau đó bạn có thể upload lên google code để lưu trữ lâu dài.

2. Không cho click phải chuột

<SCRIPT language=JavaScript1.1>
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert('Chuc Mot Ngay Vui ve - Gui Wedsite Cho Ban Be Cua Minh Nha !');
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</SCRIPT>

3. Làm Thanh Tiêu Đề Web Chạy Trên Task Manager Khi Đóng Mở Web

<script language=javascript >
title_tmp1=document.title
if (title_tmp1.indexOf(">>")!=-1){
title_tmp2=title_tmp1.split(">>");
title_last="*~*"+title_tmp2[1];
title_last=title_last + "*~*" + title_tmp2[2];
}else{
if (title_tmp1.indexOf("*~*")!=-1){
title_tmp2=title_tmp1.split("*~*");
title_last="*~*"+title_tmp2[1];
if (title_last=="*~*"){title_last="*~*"};
if (title_last=="*~*"){title_last="*~*"};
}
else { title_last=" wWw.KyNiemB2.Top1.Vn "}
}

title_new=""+title_last+""
step=0
function flash_title()
{
step++
if (step==8) {step=1}
if (step==1) {document.title='[----*'+title_new+'*----]'}
if (step==2) {document.title='[---*-'+title_new+'-*---]'}
if (step==3) {document.title='[--*--'+title_new+'--*--]'}
if (step==4) {document.title='[-*---'+title_new+'---*-]'}
if (step==5) {document.title='[--*--'+title_new+'--*--]'}
if (step==6) {document.title='[---*-'+title_new+'-*---]'}
if (step==7) {document.title='[----*'+title_new+'*----]'}
setTimeout("flash_title()",180);
}
flash_title()
</script>

4. Chống Click Chuột Phải ... Và Làm "Giật Giật Web Nêu Người Xem Cứ Cố ý Click Right ...

<SCRIPT language=JavaScript>
document.onmousedown=click
var times=0
var times2=10
function click() {
if ((event.button==2) || (event.button==3)) {
if (times>=1) { earthquake() }
alert("Ban Ko Dc Click Chuot Phai");
times++ } }
function earthquake() {
alert("Ban Ko Dc Click Chuot Phai");
window.moveTo(0, 0)
window.moveTo(1, 1)
window.moveTo(2, 2)
window.moveTo(3, 3)
window.moveTo(4, 4)
window.moveTo(5, 5)
window.moveTo(6, 6)
window.moveTo(7, 7)
window.moveTo(8, 8)
window.moveTo(9, 9)
window.moveTo(10, 10)
window.moveTo(9, 9)
window.moveTo(8, 8)
window.moveTo(7, 7)
window.moveTo(6, 6)
window.moveTo(5, 5)
window.moveTo(4, 4)
window.moveTo(3, 3)
window.moveTo(2, 2)
window.moveTo(1, 1)
alert("Giat Nhu Fiml Nha??!")
tremmors()
}
function tremmors() {
window.moveTo(0, 0)
window.moveTo(1, 1)
window.moveTo(2, 2)
window.moveTo(3, 3)
window.moveTo(4, 4)
window.moveTo(5, 5)
window.moveTo(6, 6)
window.moveTo(7, 7)
window.moveTo(8, 8)
window.moveTo(9, 9)
window.moveTo(10, 10)
window.moveTo(11, 11)
window.moveTo(12, 12)
window.moveTo(9, 9)
window.moveTo(8, 8)
window.moveTo(7, 7)
window.moveTo(6, 6)
window.moveTo(5, 5)
window.moveTo(4, 4)
window.moveTo(3, 3)
window.moveTo(2, 2)
window.moveTo(1, 1)
tremmors()
}
</SCRIPT>

5. Làm Con Chuột Có Mấy Cái Vòng Chạy Chạy Xung Quanh ...

<script language="JavaScript">

</script>

6. TITLE Chạy .....

<script language=JavaScript>
var txt=" ..:: WelCome To Website | wWw.KyNiemB2.Top1.Vn | Mang Giai Tri Online -> 12B2 THPT EaH'Leo - Daklak - Design : HoangVu Entertainment© -";
var expert=200;
// speed of roll
var refresh=null;
function marquee_title(){
document.title=txt;
txt=txt.substring(1,txt.lenghth)+txt.charAt(0);
refresh=setTimeout("marquee_title()",expert);
}
marquee_title();
</script>

7. Dòng Chữ Chạy Dưới web ...

<SCRIPT language=JavaScript>
puchtit=")«-»(..:: Welcome To WwW.NhoOi.Kiss.To ::..)«-»(";
letrero2="·.¸¸.·´´¯`··._.·";
letrero1="·.¸¸.·´´¯`··._.·";ultimo1=letr ero1.length-1;
ultimo2=letrero2.length-1;
tiempo=setTimeout("scroll()",.100);
function scroll()
{
aux1=letrero1.charAt(ultimo1-1);
letrero1=aux1+letrero1.substring(0,ultimo1-1);
aux2=letrero2.charAt(0);
letrero2=letrero2.substring(1,ultimo2+1)+aux2;
window.status="(" + letrero1 + ")(" + letrero2 + puchtit + letrero1 + ")(" + letrero2 + ")";
tiempo=setTimeout("scroll()",.100);
return true;
}
// -->
</script>

8. Tạo 1 Button Giờ Trên Website

<SCRIPT language=JavaScript>

</SCRIPT>

9. Bộ Đếm 10 , 9 ....0

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<STYLE>BODY A:link {
COLOR: #253d59; TEXT-DECORATION: none
}
A:visited {
COLOR: #253d59; TEXT-DECORATION: none
}
A:hover {
padding:0px; BACKGROUND: #ffffff; MARGIN: 0px; COLOR: #253d59; tahoma:
}
A:active {
padding:0px; BACKGROUND: #ffffff; MARGIN: 0px; COLOR: #253d59; tahoma:
}
HTML {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #8b8b8b; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #7a7a7a
}
BODY {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #8b8b8b; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #7a7a7a
}
</STYLE>

<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY>
<CENTER><B><FONT style="FONT-SIZE: 40pt" face="Comic Sans MS"
color=#ffff00>[</FONT><FONT style="FONT-SIZE: 40pt" face="Comic Sans MS"
color=#ff3333> <A href="http://www.kyniemb2.top1.vn/">w</A></FONT><A
href="http://www.kyniemb2.top1.vn/"><FONT style="FONT-SIZE: 40pt"
face="Comic Sans MS" color=#cc00ff>W</FONT><FONT style="FONT-SIZE: 40pt"
face="Comic Sans MS" color=#ff3333>w.</FONT><FONT style="FONT-SIZE: 40pt"
face="Comic Sans MS">K<FONT color=#00ff00>y</FONT><FONT
color=#ff0000>Ni</FONT>e<FONT color=#ffff00>m</FONT><FONT
color=#cc00ff>B2</FONT>.T<FONT color=#00ff00>o</FONT>p<FONT
color=#ff3399>1</FONT>.V<FONT color=#ff0000>n</FONT></FONT></A><FONT
style="FONT-SIZE: 40pt" face="Comic Sans MS" color=#ff3333> </FONT><FONT
style="FONT-SIZE: 40pt" face="Comic Sans MS" color=#ffff00>]<BR></FONT><FONT
face="Comic Sans MS" color=#ff3399 size=6>Thay Đôi? Tên Miê`n Chính Thú*c
</FONT></B>
<DIV id=txt align=center></DIV>
<SCRIPT type=text/javascript>
var c=10;
var t;
var theDate = new Date();
s=theDate.getSeconds();
function ChangeUrl(site){
document.getElementById("txt").innerHTML='<br><br> <br><h3><a href="http://www.NHOOI.KISS.TO" target=Index><font face="Comic Sans MS" color=3366CC></a><br><a href="'+site+'" target=Index><font color=FF00FF><big>Click vào đây đê? vào Trang Chu? </big></font></font></a></h3><br><br><br><p align="center"><FONT face="Tahoma">Trình duyệt sẽ tự động chuyển sang <b><font color=blue>'+site+'</font></b> trong vòng <b><font color=red>'+c+'</font></b> giây nữa.<br></Font>';
document.getElementById("txt").innerHTML+='<strong ><a href="'+site+'" target="_top" onClick="this.style.behavior=\'url(#default#homepa ge)\';this.setHomePage(\'http://nhooi.kiss.to\');"><Font Face="Tahoma">Click vào đây nếu bạn chờ quá lâu [ Click ] Vao Day Cung Duoc !^^.</a></strong><br></span></p></Font>';
c-=1;
url=site;
t=setTimeout("ChangeUrl(url)",1000);
stopCount(c,url);
}
function stopCount(c,link){
if(c==-1)
{clearTimeout(t);
location.href=link;}
}
</SCRIPT>
<SCRIPT>
ChangeUrl('Http://KyNiemB2.Top1.Vn');
</SCRIPT>

<FONT face="Comic Sans MS" size=6><B><FONT
color=#ff0000>Design</FONT></B><B><FONT color=#00ff00> </FONT><FONT
color=#cc00ff>:</FONT><FONT color=#00ff00> </FONT><FONT
color=#ffff00>Hô`</FONT><FONT color=#00ff00> Ho</FONT>àng<FONT color=#00ff00>
</FONT><FONT color=#0000ff>Vũ</FONT><FONT color=#00ff00> </FONT><FONT
color=#cc00ff>®</FONT><FONT color=#00ff00><BR></FONT></B><FONT
color=#ffff00>Website</FONT><FONT color=#00ff00>
:wWw.KyNiemB2.Top1.Vn</FONT></FONT><FONT color=#00ff00
size=6><BR></FONT></CENTER>
</TEXTAREA></P></BODY></HTML>

[Tải Code Chương trình tại đây (Lưu ý: Sau 5s, click Bỏ qua quảng cáo - Skin Ad)]

Giới thiệu CSS

in CSS, Học lập trình /

CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..
Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn.
Trước khi bắt đầu tìm hiểu thêm về CSS tôi muốn bạn biết một chút về thế mạnh của nó trong việc thiết kế web. Ví dụ nếu làm việc với HTML và bạn muốn font chữ của toàn bộ trang web là Arial. Bạn sẽ phải làm đi làm lại như thế cho tất cả các file .html mà bạn có. Nhưng nếu bạn sử dụng CSS, thì bạn chỉ cần làm một lần và tất cà các trang khác sẽ tự động được thay đổi.
Ba cách để định dạng trang web

Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất. Nhưng bạn cũng nên biết về hai cách còn lại vì đôi khi bạn cũng phải sử dụng đến nó tuy không nhiều
.
1. Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML

Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó.

Ví dụ

<p style=”font-size:16pt; font-weight:bold; color:blue;”>
Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi cách hiển thị trên trình duyệt
</p>

2. Nhúng vào trang web

Cách thứ hai là bạn khai báo code CSS nằm trong cặp thẻ <style></style> được đặt ở phần <head></head> của tài liệu. Về cơ bản nó cũng chỉ có tác động cục bộ lên file mà bạn chèn đoạn code CSS này. Nó có phạm vi ảnh hưởng lớn hơn là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file khác trong cùng một trang web.

<head><title>Nhúng vào trang</title><meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ /><style type=”text/css”>h1 {font-size: 16px;}p {color:blue;}</style></head>

3. Liên kết đến một file biệt lập

Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì bạn chỉ cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có. Bằng cách này chúng ta có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi nhau. Nếu bạn viết toàn bộ code CSS trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ đơn giản.
Để liên kết file CSS đến tất cả các file .html của bạn, bạn chỉ cần chèn đoạn code sau vào giữa thẻ <head></head> của tài liệu:

<link href="style_sheet.css" rel="stylesheet" type="text/css" />

Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web của bạn. Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi.
Điều cuối cùng bạn cần biết về 3 loại hình sử dụng CSS là
Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập
Công thức trên có nghĩa là cách Cục bộ “đánh bại” cách Nhúng vào trang và Liên kết đến một file riêng biệt. Hoặc nói theo cách khác thì cách nhúng cục bộ là mạnh nhất, sau đó đến Nhúng vào trang và cuối cùng là liên kết đến một file biệt lập.

Tài liệu có tại http://kcc.net.vn

Cùng Học IT

[ JavaScript ] Một số đoạn code JavaScript hữu ích cho Web và Blog

Giới thiệu CSS

* Hướng dẫn tự học lập trình: C# | C/C++ | Java | Android | iOS (Swift) | JavaScript | Assembly | Python | PHP

* Chương trình ví dụ: Đồ họa máy tính | Cấu trúc dữ liệu và giải thuật | Toán rời rạc

* Tìm hiểu: Blockchain | Trí tuệ nhân tạo | Thuật toán di truyền | Học máy | Cơ sở dữ liệu | Phương pháp tối ưu

# BÀI VIẾT NỔI BẬT #