Tạo “mưa tuyết” bằng JavaScript

Thảo luận trong 'Lập trình & Đồ hoạ' bắt đầu bởi cuongomega, 22/10/05.

  1. cuongomega

    cuongomega Youtube Master Race

    Tham gia ngày:
    21/10/05
    Bài viết:
    3
    Bạn muốn thấy cảnh mưa tuyết rơi rơi trên trang Web của mình? Xin mời bạn “xắn tay áo” và gõ vào máy đoạn mã JavaScript sau đây (bạn nhớ lưu thành dạng văn bản có phần mở rộng là .html). Các bông tuyết được vẽ bằng công cụ Airbrush trong Microsoft Paint, kích thước 10x10 pixel, lưu thành tập tin blue_snow.gif. Chương trình có thể chạy được trên cả Internet Explorer 4.0 và Netscape Navigator 4.0 trở lên. ( lưu dưới dạng file html )

    Đây là đọan code:

    <html>
    <head> <title> Mua tuyet </title> </head>
    <body> <center>
    <script LANGUAGE="JavaScript1.2">
    <!-- Begin
    var no = 25; var speed = 10;
    var snowflake = "blue_snow.gif";
    var ns4up = (document.layers) ? 1 : 0;
    var ie4up = (document.all) ? 1 : 0;
    var dx, xp, yp; var am, stx, sty;
    var i, doc_width = 800, doc_height = 600;
    if (ns4up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    } else if (ie4up) {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }
    dx = new Array(); xp = new Array();
    yp = new Array(); am = new Array();
    stx = new Array(); sty = new Array();
    for (i = 0; i < no; ++ i) {
    dx = 0;
    xp = Math.random()*(doc_width-50);
    yp = Math.random()*doc_height;
    am = Math.random()*20;
    stx = 0.02 + Math.random()/10;
    sty = 0.7 + Math.random();
    if (ns4up) {
    if (i == 0) {
    document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
    document.write("top=\"15\" visibility=\"show\"><img src=\"");
    document.write(snowflake + "\" border=\"0\"></layer>");
    } else {
    document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
    document.write("top=\"15\" visibility=\"show\"><img src=\"");
    document.write(snowflake + "\" border=\"0\"></layer>");
    }
    } else if (ie4up) {
    if (i == 0) {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
    document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
    document.write(snowflake + "\" border=\"0\"></div>");
    } else {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
    document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
    document.write(snowflake + "\" border=\"0\"></div>");
    }
    }
    }
    function snowNS() {
    for (i = 0; i < no; ++ i) {
    yp += sty;
    if (yp > doc_height-50) {
    xp = Math.random()*(doc_width-am-30);
    yp = 0;
    stx = 0.02 + Math.random()/10;
    sty = 0.7 + Math.random();
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    }
    dx += stx;
    document.layers["dot"+i].top = yp;
    document.layers["dot"+i].left = xp + am*Math.sin(dx);
    }
    setTimeout("snowNS()", speed);
    }
    function snowIE() {
    for (i = 0; i < no; ++ i) {
    yp[i] += sty[i];
    if (yp[i] > doc_height-50) {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = 0;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }
    dx[i] += stx[i];
    document.all["dot"+i].style.pixelTop = yp[i];
    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
    }
    setTimeout("snowIE()", speed);
    }
    if (ns4up) {
    snowNS();
    } else if (ie4up) {
    snowIE();
    }
    // End -->
    </script> </body>
    </html>[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
     
  2. conan118

    conan118 Mr & Ms Pac-Man

    Tham gia ngày:
    21/10/03
    Bài viết:
    156
    _Đoạn mã này của bạn thật là tuyệt ! Mình mới biết sơ sơ về html nhưng nhờ đoạn mã này của bạn mà mình cũng có một trang web trông cũng pro lắm, haha ^_^. Mà mình có mấy thắc mắc muốn hỏi các bạn trả lời dùm nha:
    _tuyết chỉ rơi có nửa trang, bạn chỉ cách cho nó rơi hết trang dùm mình nha
    _cho mình xin đoạn mã để chữ chạy dọc lên dọc xuống.
    _trang web của mình có cách nào để chuyển thành file mà coi được trên VCD ko
    Mấy thắc mắc mấy bạn chỉ dùm nha. xin cám ơn.
     
  3. haiduong87

    haiduong87 Knee before Eden Lord Lão Làng GVN

    Tham gia ngày:
    20/5/04
    Bài viết:
    24,845
    Nơi ở:
    TP HCM
    anh có thể post luôn nguyên trang được ko ?
    em tạo cái blue snow gì đó khó wa'
     
  4. conan118

    conan118 Mr & Ms Pac-Man

    Tham gia ngày:
    21/10/03
    Bài viết:
    156
    _bluesnow là dô paint vẽ. Mình thử rồi thì thấy đoạn mã này đưa toàn bộ trang vẽ lên trang web luôn (cả phần vẽ lẫn phần còn trắng bên ngoài), nên tốt nhất là vẽ một hình tròn nhỏ ở góc, rồi kéo cho trang giấy nhỏ lại ôm lấy hình tròn đó, nhưng mình không biết có cách nào để cho nó ôm hoàn toàn nên vẫn có một hình vuông nhỏ bao lấy hình tròn, nên mình tô cái hình vuông nó trùng màu với màu nền của trang web. Bây giờ save lại và dô trang web là bạn đã có cảnh tuyết rơi rồi đó (nếu bạn biết cách nào kéo trang giấy ôm sát hình tròn luôn thì chỉ mình với nha).
    -Còn đoạn code trên của mega là nguyên trang luôn rồi đó, nhưng bạn phải tô tuyết (là hình tròn trong bluesnow đó) màu khác với màu trắng thì mới thấy được đó.
    -các pro đâu hết rồi chỉ dùm đệ đi, sao không thấy ai lên tiếng hết vậy, buồn quá
     
  5. haiduong87

    haiduong87 Knee before Eden Lord Lão Làng GVN

    Tham gia ngày:
    20/5/04
    Bài viết:
    24,845
    Nơi ở:
    TP HCM
    ec ec !
    tui hông biết vẽ làm sao để có cái kích thước là 10*10 cả !
    làm sao nhi?
     
  6. LuaThienTaThan

    LuaThienTaThan Youtube Master Race

    Tham gia ngày:
    7/11/05
    Bài viết:
    15
    Cho góp chút ý kiên !
    Hy vọng hông mất lòng . ::)
    Đoạn mã này quen quen hình như thấy ở đâu rồi .
    Với lại những đoạn mã javacript nếu bạn nào muốn sưu tầm thêm hay nghiên cứu
    thì ở trang echip.com.vn và trang thuvientinhoc.com
    có rất nhiều đặc biệt trang thuvientinhoc có cả e-book hướng dẫn tự học bằng tiếng việt nữa
    Còn bên echip thì có cả mã lẫn trang ex
     
  7. Keitaro-kun

    Keitaro-kun Donkey Kong

    Tham gia ngày:
    9/8/04
    Bài viết:
    335
    Nơi ở:
    Snow Moon
    Ngồi rỗi việc đi vác tù và chơi! :D

    Có thấy dòng này ko?

    Mã:
    
    var i, doc_width = 800, doc_height = 600;
    
    đó là chiều rộng vào cao của đường rơi tuyết, thích dài ngắn thế nào thì thay đổi nó thôi. (màn hình giờ là cỡ 1024x768 pixels )

    còn mấy bông biếc gì thì chú download file dưới nhá. Dùng Ms Paint thì làm sao mà làm nền transparent (trong suốt) được
     

    Các file đính kèm:

  8. }{ell-Fire

    }{ell-Fire Dragon Quest

    Tham gia ngày:
    29/7/05
    Bài viết:
    1,303
    Mưa tuyết hơi bị... cổ lổ sỉ. Thui thì chỉnh sửa lại 1 tý cho thành mưa đầu lâu vậy. Chỉ cần sử code lại cho phù hợp thui. Hình tui up bên dưới (nền trong suốt). Mấy bác thưởng thức nhé.
     

    Các file đính kèm:

  9. conan118

    conan118 Mr & Ms Pac-Man

    Tham gia ngày:
    21/10/03
    Bài viết:
    156
    _Cái đầu lâu của bác tuyệt thật, bác chỉ cho tôi trang web nào có nhiều cái giống vậy đi, mấy hình ảnh động đó. Hay chỉ tôi cách làm cũng được. Cám ơn nhiều
     
  10. }{ell-Fire

    }{ell-Fire Dragon Quest

    Tham gia ngày:
    29/7/05
    Bài viết:
    1,303
    Nó thì đẹp đó nhưng làm nhúng vô web là trang web nặng kinh khủng. Đang chạy offline mà cũng bị lag hic hic. Mấy cái hình này thằng bạn tui nó send cho tui qua email. Nếu bạn thích thì tui sẽ up thêm. Nhưng loại hình có nền trong suốt này hiếm lém... Còn lại đa số có hình nền màu đen.
     
  11. conan118

    conan118 Mr & Ms Pac-Man

    Tham gia ngày:
    21/10/03
    Bài viết:
    156
    _Nặng vậy chắc chịu không nổi quá. Nhưng bác cứ post lên đi ai biết sau này có người cần thì sao.
    _ À, mà trang www.thuvientinhoc.com của bác LuaThienTaThan giới thiệu hay lắm đó, độc đáo.Các bác có nhu cầu cứ lên đó thử đi.Tuyệt ^_^
     
  12. }{ell-Fire

    }{ell-Fire Dragon Quest

    Tham gia ngày:
    29/7/05
    Bài viết:
    1,303
    Uh hay thiệt. Thấy cái domain .com là cung pro lém roài. Nhưng thấy trang nó nội dung chưa được "thâm hậu lém".

    Vô trang này lấy mấy cái đầu lâu nè:
    http://i-boy.web1000.com/060/index01.html
    (có 1 điều bất ngờ đang chờ bạn) ;;)
     
  13. o0o Agumon o0o

    o0o Agumon o0o Donkey Kong

    Tham gia ngày:
    11/6/05
    Bài viết:
    351
    Thêm vào một trong các đoạn code sau:
    Mã:
    <!--Dùng cho chữ chạy từ trái qua, có thể thay đổi giá trị left và height-->
    <marquee direction="left" width="100" height="100">Text!!!</marquee>
    Mã:
    <!--Dùng cho chữ chạy từ phải qua-->
    <marquee direction="right">Text!!!</marquee>
    Mã:
    <!--Dùng cho chữ chạy qua chạy lại(trái - phải) có thể thay left thành right-->
    <marquee direction="left" behavior="alternate">Text</marquee>
    Mã:
    <!--Dùng cho chữ chạy từ dưới lên-->
    <marquee direction="up">Text</marquee>
    Mã:
    <!--Dùng cho chữ chạy từ trên xuống-->
    <marquee direction="down">Text</marquee>
    Ngoài behavior bạn có thể thêm vào scrollamount hoặc là scrolldelay.
    Have Fun!!!
     
  14. conan118

    conan118 Mr & Ms Pac-Man

    Tham gia ngày:
    21/10/03
    Bài viết:
    156
    _cám ơn bác agumon nhiều, nhưng mà đoạn text của mình chạy nhanh quá. có cách nào cho nó chạy chậm lại không chỉ dùm mình với.
    _ Còn cái mưa tuyết mình chỉnh lại rồi nhưng vẫn vậy à. Mà khi mình coi ở chế độ full screen thì nó rơi được hết màn hình còn coi ở chế độ bình thường thì nó chỉ rơi có một nửa thôi, các bác chỉ giúp nhá.
    _À còn nữa (đòi hỏi hơi nhiều, các bác thông cảm ^_^), làm sao để đổi hình của con chuột và làm cho màn hình lấp lánh vậy, cái này mình tìm ở thuvientinhoc không thấy có, cái có thì không sài được. Các bác giúp dùm nha. Cám ơn nhiều.
     

Chia sẻ trang này