Thiết kế giao diện Website bán thiết bị chơi game

ong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ. Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, công nghệ thông tin cũng có được những công nghệ có đẳng cấp và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác. Mạng internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở thành một công cụ không thể thiếu, là nền tảng chính cho sự truyển tải, trao đổi thông tin trên toàn cầu. Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng, chỉ cần có một máy tính kết nối Internet và một dòng dữ liệu truy tìm thì gần như lập tức cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh và thậm chí đôi lúc có cả những âm thanh nếu bạn cần. Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống. Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thể giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người. Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một cửa hàng hay shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ là cần thiết. Vậy phải quảng bá thế nào? Đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cả các sản phẩm của mình . Vì vậy em chọn đề tài:” Xây Dựng Giao Diện Website Bán Thiết Bị Chơi Game”.

TỔNG QUAN VỀ WEBSITE

NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML

Ngôn ngữ đánh dấu siêu văn bản tiếng Anh là Hypertext Markup Language, viết tắt là HTML.

Ngôn ngữ đánh dấu siêu văn bản (HTML) là một tập hợp các mã đánh dấu được sử dụng để hiển thị nội dung trên Internet Các mã này giúp trình duyệt web xác định cách thức hiển thị văn bản và hình ảnh trên trang Mỗi mã đánh dấu được gọi là một "yếu tố" (element) hoặc "thẻ" (tag), trong đó một số yếu tố được sử dụng theo cặp để chỉ định thời điểm bắt đầu và kết thúc việc hiển thị các hiệu ứng nhất định.

Ngôn ngữ đánh dấu siêu văn bản (HTML) là một ngôn ngữ máy tính thiết yếu cho việc lập trang web, với cú pháp và từ mã dễ hiểu Qua thời gian, HTML đã trở nên mạnh mẽ hơn trong lập trình, liên tục phát triển để đáp ứng nhu cầu của Internet Tổ chức World Wide Web Consortium (W3C) đóng vai trò quan trọng trong việc thiết kế và duy trì ngôn ngữ này.

Siêu văn bản (Hypertext) là cách người dùng Internet điều hướng trang web thông qua việc nhấp vào các siêu liên kết (hyperlink) Khi nhấn vào những liên kết này, người dùng sẽ được chuyển đến các trang mới, giúp cải thiện trải nghiệm duyệt web.

"Hyper" đề cập đến tính không tuyến tính, cho phép người dùng truy cập mọi nơi trên Internet chỉ với một cú click vào các liên kết có sẵn Đánh dấu (markup) là phương pháp mà HTML sử dụng để đánh dấu các đoạn văn bản, biến chúng thành các loại văn bản cụ thể Ví dụ, văn bản có thể được đánh dấu bằng cách in đậm hoặc in nghiêng để thu hút sự chú ý đến một từ hoặc cụm từ nhất định.

Sử dụng HTML, bạn có thể thêm tiêu đề, định dạng văn bản, tạo danh sách, nhấn mạnh nội dung, chèn hình ảnh, tạo liên kết và xây dựng bảng, cùng nhiều tính năng khác để kiểm soát cấu trúc và trình bày trang web của mình.

Tiêu đề trang web

Nội dung trang web có thể đặt trong các thẻ hmtl

Bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng

 : khai báo kiểu dữ liệu hiển thị

 và : cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ đóng gói tất cả nội dung của trang HTML

 và : khai báo các thông tin meta của trang web như: tiêu đề trang, charset

 và : cặp thẻ nằm bên trong thẻ , dùng để khai báo tiêu đề của trang

 và : cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang

1.4 NGÔN NGỮ KỊCH BẢN CSS

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm kiếm và định dạng các phần tử do các ngôn ngữ đánh dấu như HTML tạo ra Nói một cách đơn giản, HTML chịu trách nhiệm tạo ra các cấu trúc như đoạn văn, tiêu đề và bảng trên website, trong khi CSS giúp cải thiện hình thức và kiểu dáng của những phần tử này.

CSS cho phép chúng ta thêm phong cách cho các phần tử HTML, bao gồm việc thay đổi màu sắc trang, màu chữ và cấu trúc, mang lại nhiều tùy chọn tùy chỉnh cho thiết kế web.

HTML là cấu trúc cơ bản của trang web, trong khi CSS tạo nên phong cách cho trang Những màu sắc, phông chữ và hình ảnh nền hấp dẫn đều nhờ vào CSS Ngôn ngữ này không chỉ ảnh hưởng đến tâm trạng và giai điệu của trang web mà còn là một công cụ mạnh mẽ, cần thiết cho lập trình viên web CSS cũng cho phép các trang web thích ứng với nhiều kích thước màn hình và loại thiết bị khác nhau.

Cấu trúc một đoạn CSS: Một đoạn CSS bao gồm 4 phần như thế này: vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị; }

Khi khai báo CSS, vùng chọn sẽ được xác định và các thuộc tính cùng giá trị sẽ được đặt trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính cần có một giá trị riêng, có thể là số hoặc tên giá trị từ danh sách có sẵn của CSS Giá trị và thuộc tính phải được phân cách bằng dấu hai chấm, và mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy ở cuối Một vùng chọn có thể chứa nhiều thuộc tính không giới hạn.

1.5 NGÔN NGỮ KỊCH BẢN JAVASCRIPT

JavaScript là một ngôn ngữ lập trình đa nền tảng, kịch bản và hướng đối tượng, nổi bật với kích thước nhỏ gọn Khi hoạt động trong một môi trường cụ thể, JavaScript có khả năng kết nối và quản lý các đối tượng của môi trường đó một cách hiệu quả.

JavaScript bao gồm các thư viện tiêu chuẩn cho các đối tượng như Array, Date và Math, cùng với các yếu tố cốt lõi của ngôn ngữ lập trình như toán tử, cấu trúc điều khiển và câu lệnh Ngôn ngữ này có khả năng mở rộng cho nhiều mục đích thông qua việc bổ sung các đối tượng mới.

JavaScript là ngôn ngữ lập trình logic, cho phép sửa đổi nội dung trang web và tương tác với người dùng một cách linh hoạt Những ứng dụng phổ biến của JavaScript bao gồm hộp xác nhận, nút kêu gọi hành động, và việc cập nhật thông tin mới vào nội dung hiện có.

JavaScript là ngôn ngữ lập trình chủ yếu được sử dụng để phát triển các trang web tương tác Hầu hết các tính năng và hoạt động mà người dùng trải nghiệm trên website đều nhờ vào JavaScript, giúp cải thiện các chức năng và hành vi mặc định của trình duyệt.

JavaScript phía máy khách là một ngôn ngữ lập trình được mở rộng để quản lý trình duyệt và mô hình đối tượng tài liệu (DOM) Nó cho phép ứng dụng tương tác với các yếu tố trên trang HTML và phản hồi các hành động của người dùng như nhấp chuột, điền biểu mẫu và chuyển trang.

JavaScript phía Server là một phiên bản mở rộng của JavaScript, cung cấp các đối tượng cần thiết để thực thi mã trên máy chủ Nó cho phép ứng dụng kết nối với cơ sở dữ liệu, truyền tải thông tin liên tục giữa các phần của ứng dụng và thực hiện các thao tác với tập tin trên máy chủ.

THƯ VIỆN JQUERY

jQuery là một thư viện JavaScript được John Resig phát triển vào năm 2006, với phương châm "Viết ít hơn, làm nhiều hơn" Thư viện này giúp đơn giản hóa việc xử lý HTML, sự kiện, tạo hiệu ứng động và tương tác Ajax, góp phần vào khái niệm Phát triển Web Nhanh chóng jQuery cung cấp một bộ công cụ tiện ích, giúp giảm thiểu lượng mã cần viết cho các tác vụ đa dạng.

Thao tác DOM với jQuery cho phép người dùng dễ dàng lựa chọn và duyệt các phần tử DOM tương tự như cách sử dụng CSS Bên cạnh đó, jQuery cũng hỗ trợ chỉnh sửa nội dung của các phần tử thông qua một công cụ Selector mã nguồn mở được gọi là Sizzle.

jQuery giúp cải thiện tương tác người dùng bằng cách xử lý các sự kiện đa dạng một cách hiệu quả, đồng thời giữ cho mã HTML gọn gàng và dễ hiểu nhờ vào các Event Handler.

Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX.

Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn có thể sử dụng trong các Website của mình.

Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB

jQuery được hỗ trợ bởi hầu hết các trình duyệt hiện đại, bao gồm Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Chrome và Opera 9.0+.

Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú pháp XPath cơ bản.

GIỚI THIỆU VỀ WEBSITE BÁN THIẾT BỊ CHƠI GAME

MÔ TẢ YÊU CẦU

Website Shop Bán Thiết Bị Chơi Game Shopee là nơi lý tưởng cho những người đam mê game, giúp họ nhanh chóng tìm kiếm và mua sắm các thiết bị chơi game cần thiết Để thu hút người dùng, website cần đáp ứng đầy đủ các nhu cầu của khách hàng.

- Hình ảnh sản phẩm đẹp lung linh, đa dạng mẫu mã, hình ảnh thì bạn không cần phải chăm sóc như cây ngoài thực tế.

- Website có giao diện đơn giản nhưng đẹp, bắt mắt thu hút khách hàng.

- Khách hàng chỉ việc online xem mẫu mã và chọn sản phẩm, có thể mua hàng ở bất cứ đâu mà không cần đến cửa hàng.

- Bạn có thể quản lý bao quát toàn cửa hàng chỉ với 1 cú click chuột.

- Cập nhật mẫu mã sản phẩm, phụ kiện mới linh hoạt, nhanh chóng.

- Bán hàng mọi lúc mọi nơi, kể cả khi bạn đi du lịch, khi đang ăn uống với bạn bè,…

CÁC HỆ THỐNG NGHIỆP VỤ

2.2.1 Trang chủ Đây là trang đầu tiên sẽ được hiện lên khi người dùng truy cập vào website và nó có vài nghiệp vụ sau đây:

- Tạo thanh menu điều hướng trang web.

- Hiển thị danh sách các sản phẩm đang bán chạy nhất của trang web

- Link đến trang đăng nhập và đăng kí cho người dùng.

- Có thể hiển thị thông báo, giỏ hàng

2.2.2 Trang thông tin chi tiết sản phẩm

Thông tin sản phẩm mà bạn cung cấp có ảnh hưởng lớn đến cách sản phẩm được trình bày trước khách hàng, từ đó giúp bạn quản lý hiệu quả hơn và hỗ trợ khách hàng tìm kiếm sản phẩm nhanh chóng, góp phần vào quyết định mua hàng chính xác Tuy nhiên, việc cung cấp thông tin chi tiết có thể linh hoạt tùy thuộc vào phương thức quản lý và kinh doanh của từng doanh nghiệp.

2.2.3 Trang đăng ký tài khoản

Khách hàng sẽ được cung cấp một tài khoản cá nhân, cho phép họ thoải mái lựa chọn sản phẩm yêu thích mà không lo lắng về việc lộ thông tin hay nhầm lẫn sản phẩm Sau khi đăng ký tài khoản, hệ thống sẽ phân biệt các người dùng khác nhau, giúp phục vụ hoặc từ chối các dịch vụ một cách hiệu quả Điều này đảm bảo rằng khách hàng không phải lo lắng về sản phẩm và dịch vụ, đồng thời bảo vệ thông tin cá nhân một cách an toàn.

Để tham gia một trang web yêu cầu đăng ký thành viên, người dùng cần thực hiện theo hướng dẫn để nhập tên đăng nhập (ID) và mật khẩu (password) nhằm hoàn tất quy trình đăng nhập.

Để đăng nhập, người dùng cần phải đăng ký thành viên trước đó, quy trình bao gồm việc chọn và ghi tên người dùng (username) cùng với việc chọn và ghi mật khẩu.

Thủ tục này giúp hệ thống máy tính nhận diện và phân biệt các người dùng khác nhau, từ đó quyết định việc cung cấp hoặc từ chối các dịch vụ nhất định Đối với các trang web, quy trình này đảm bảo tính nghiêm túc và an ninh cho cả dịch vụ và người dùng.

2.2.5 Trang giỏ hàng Đây là trang cung cấp đầy đủ thông tin các sản phẩm mà khách hàng đã thêm vào giỏ hàng bao gồm: số lượng, đơn giá, thành tiền, các khuyến mãi đi kèm cùng các mã giảm giá có thể sử dụng Khách hàng có thể thêm, xoá sản phẩm và đi đến trang thanh toán.

Tất cả thông tin cá nhân của khách hàng, bao gồm tên đăng nhập, tên, email, số điện thoại, giới tính, ngày sinh và ảnh đại diện, đều được hiển thị tại đây Khách hàng có thể nhanh chóng và dễ dàng thay đổi các thông tin này, đồng thời vẫn đảm bảo tính an toàn cho dữ liệu cá nhân của mình.

Chúng tôi giúp khách hàng dễ dàng và nhanh chóng mua các sản phẩm yêu thích Đối với những người lần đầu truy cập trang web, việc mua sắm có thể trở nên khó khăn và lạ lẫm Do đó, trang hướng dẫn mua hàng sẽ cung cấp thông tin chi tiết, hỗ trợ khách hàng tìm kiếm và lựa chọn sản phẩm phù hợp với nhu cầu của họ.

Giúp khách hàng rễ rang kiểm tra các thông báo của shop về mọi vấn đề như sản phẩm mới, sản phẩm đã mua, chương trình khuyến mại,

2.2.9 Trang đơn mua Đây là trang sẽ tổng hợp lại tất cả các đơn hàng mà khách hàng đã đặt, cho khách hàng biết đầy đủ thông tin về mặt hàng và tiến trình giao hàng.

Khách hàng có thể tải ứng dụng riêng được shop thiết kế để thuận tiện mua hàng theo dõi các thông báo của shop.

Ngân hàng là trang mà người sử dụng ứng dụng them tài khoản ngân hàng để có thể thanh toán online.

2.2.12 Trang địa chỉ. Đây là trang mà người dùng thêm địa chỉ để thanh toán trực tiếp sau khi đặt hàng.

2.2.13 Trang đổi mật khẩu. Được dùng để cho người dùng thay đổi mật khẩu khi có thể bị lộ thông tin mật khẩu tài khoản.

Voucher là phiếu mua hàng mà khách hàng có thể sử dụng như một phương thức thanh toán, tương tự như tiền mặt, thẻ hoặc chuyển khoản.

Voucher mang lại nhiều lợi ích đáng kể cho doanh nghiệp, trở thành công cụ marketing hiệu quả giúp kết nối và chăm sóc khách hàng thân thiết Chúng được áp dụng phổ biến trong các hoạt động kinh doanh, tạo ra sự gắn kết và thúc đẩy doanh số bán hàng.

Shopee xu là đồng tiền ảo do Shopee phát hành, cho phép người dùng thanh toán khi mua sắm trực tuyến trên website hoặc ứng dụng Shopee Ngoài việc sử dụng để thanh toán, người dùng còn có thể đổi Shopee xu lấy mã giảm giá hoặc tham gia các hoạt động thú vị trên trang “Shopee xu”.

Mỗi xu Shopee sẽ tương ứng với giá trị là 1 VND.

2.3 MỤC TIÊU XÂY DỰNG TRANG WEBSITE BÁN THIẾT BỊ CHƠI GAME

- Việc thiết kế website sẽ giúp cho bạn tiếp cận được nguồn khách hàng tiềm năng nhiều hơn so với phương pháp bán hàng truyền thống

Chúng tôi cung cấp thông tin chi tiết và khách quan về các thiết bị chơi game như bàn phím, màn hình, tai nghe và linh kiện máy tính, giúp người dùng dễ dàng lựa chọn sản phẩm phù hợp với nhu cầu của mình.

- Chứng minh được sự uy tín cho thương hiệu của Shop

- Có được sự đầu tư chính xác trong thời đại mạng internet

- Giao diện đẹp khiến khách hàng mua ghé mua sản phẩm nhiều lần

MỤC TIÊU XÂY DỰNG TRANG WEB BÁN THIẾT BỊ CHƠI GAME

Các layout đều giống nhau về phần header và footer, chỉ khác nhau về content và nó được kế thừa cho các layout khác.

- Là nơi hiển thị logo Shop, chức năng tìm kiếm, đăng nhập tài khoản, đăng ký tài khoản, tìm kiếm, kiểm tra giỏ hàng

- Navbar bên trên dẫn đến trang tải ứng dụng, kết nối mạng xã hội, thông báo và trợ giúp

3.2 PHẦN CONTENT TRANG WEB TRANG CHỦ

Bộ lọc sản phẩm bao gồm nhiều chức năng hữu ích như sắp xếp theo độ phổ biến, theo thời gian mới nhất, theo mức độ bán chạy, và phân loại giá từ thấp đến cao hoặc từ cao đến thấp, cùng với nút chuyển trang để người dùng dễ dàng tìm kiếm sản phẩm mong muốn.

3.2.2 Danh Mục Các Sản Phẩm

- Được Tạo Bởi Mỗi Khối Là 1 thẻ div

Sử dụng flex-box với thuộc tính display: flex và flex-wrap: wrap giúp dàn hàng ngang sản phẩm một cách hiệu quả, đồng thời quy định số lượng sản phẩm trên mỗi hàng, tạo ra giao diện dễ nhìn và thân thiện với người dùng.

Hiệu ứng hover giúp làm nổi bật sản phẩm bằng cách sử dụng box-shadow để tạo bóng và áp dụng thuộc tính transform cùng position, khiến sản phẩm dịch chuyển lên trên một chút, mang lại cảm giác mới lạ và thú vị cho khách hàng.

THIẾT KẾ BỐ CỤC

PHẦN HEADER TRANG WEB

- Là nơi hiển thị logo Shop, chức năng tìm kiếm, đăng nhập tài khoản, đăng ký tài khoản, tìm kiếm, kiểm tra giỏ hàng

- Navbar bên trên dẫn đến trang tải ứng dụng, kết nối mạng xã hội, thông báo và trợ giúp

PHẦN CONTENT TRANG WEB Trang Chủ

Bộ lọc sản phẩm cung cấp nhiều chức năng hữu ích, cho phép người dùng sắp xếp theo độ phổ biến, mới nhất, bán chạy, và giá cả từ thấp đến cao hoặc từ cao đến thấp Ngoài ra, còn có nút chuyển trang giúp dễ dàng duyệt qua các sản phẩm.

3.2.2 Danh Mục Các Sản Phẩm

- Được Tạo Bởi Mỗi Khối Là 1 thẻ div

Sử dụng flex-box với thuộc tính display: flex và flex-wrap: wrap giúp dàn hàng ngang sản phẩm một cách hiệu quả, đồng thời quy định số lượng sản phẩm trên mỗi hàng Điều này không chỉ tạo ra giao diện dễ nhìn mà còn mang lại trải nghiệm thân thiện cho người dùng.

Hiệu ứng hover giúp làm nổi bật sản phẩm bằng cách sử dụng box-shadow để tạo bóng và áp dụng thuộc tính transform cùng position, khiến sản phẩm nhấc lên một chút, mang đến sự mới lạ và thu hút cho khách hàng.

Hình 3.2.2 Một số sản phẩm của trang web

PHẦN FOOTER TRANG WEB

Footer là phần cuối của trang web, cung cấp thông tin giới thiệu về cửa hàng và các chức năng chăm sóc khách hàng Nó cũng kết nối với mạng xã hội như Facebook, Instagram, YouTube để hỗ trợ trực tuyến Ngoài ra, footer còn bao gồm mã QR và liên kết tải ứng dụng di động đa hệ điều hành, giúp khách hàng dễ dàng truy cập website qua ứng dụng.

KẾT QUẢ THỰC HIỆN

GIAO DIỆN TRANG CHỦ

Hình 4.1 Giao diện Trang chủ

GIAO DIỆN TRANG CHỦ SAU KHI ĐĂNG NHẬP

Hình 4.2 Trang chủ sau khi đăng nhập

GIAO DIỆN TRANG ĐĂNG NHẬP

GIAO DIỆN TRANG ĐĂNG KÝ

GIAO DIỆN TRANG HỒ SƠ CÁ NHÂN

Hình 4.5 Trang hồ sơ cá nhân

GIAO DIỆN TRANG GIỎ HÀNG

GIAO DIỆN TRANG ĐƠN MUA

GIAO DIỆN TRANG THÔNG BÁO

GIAO DIỆN TRANG THÔNG TIN CHI TIẾT SẢN PHẢM

Hình 4.9 Trang Thông tin chi tiết sản phẩm

GIAO DIỆN TRANG TRỢ GIÚP

GIAO DIỆN TRANG ỨNG DUNG …

GIAO DIỆN TRANG NGÂN HÀNG

Hình 4.12 Giao diện trang ngân hàng

GIAO DIỆN TRANG ĐỊA CHỈ

Hình 4.13 Giao diện địa chỉ

4.14 GIAO DIỆN ĐỔI MẬT KHẨU

Hình 4.14 Giao diện đổi mật khẩu

4.15 GIAO DIỆN TRANG VÍ VOUCHER

Hình 4.15 Giao diện ví voucher

Hình 4.16 Giao diện shopee xu

4.17 SOURCE CODE THUẦN JAVA SCRIPT VÀ JQUERY KẾT HỢP CSS3 TẠO HIỆU ỨNG SIÊU MƯỢT CHO TRANG WEB

4.17.1 Nút Back To Top document.addEventListener("DOMContentLoaded", function (event) { let myBtn = document.getElementById("returnToTop"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop

} else { myBtn.style.display = "none";

} document.getElementById("returnToTop").addEventListener("click", function() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;

4.17.2 Hiệu ứng chờ tải trang (Preload) tạo cảm giác dễ chịu cho khách hàng setTimeout(function(){ $('body').removeClass('preloading'); $

4.17.3 Sự Kiện onclick ở nút Tìm Kiếm trên thanh menu document.addEventListener("DOMContentLoaded", function (event) { let searchBtn = document.getElementById("searchBtn"); let searchTxt = document.getElementById("searchTxt"); searchBtn.addEventListener("click", function(e){ if(searchTxt.value == ""){ e.preventDefault(); alert("Bạn phải nhập thông tin thì mới tìm được nhé !");

4.17.4 Sự Kiện onclick ở Button Sửa của trang Hồ sơ cá nhân update.addEventListener('click', function(){ modal.style.display = "block"; overflow.classList.add("over-flow"); setTimeout(function(){ modal.style.display = "none"; overflow.classList.remove("over-flow");

}) window.addEventListener('click', function(event){ if(event.target == modal) { modal.style.display = "none"; overflow.classList.remove("over-flow");

4.17.5 Hiệu ứng thay đổi arrow khi hover ở trang chủ

$('.sort-price-icon').addClass('fa-chevron-up');

$('.sort-price-icon').removeClass('fa-chevron-down'); },function(){

$('.sort-price-icon').addClass('fa-chevron-down');

$('.sort-price-icon').removeClass('fa-chevron-up');

}); let cartBtn = document.getElementById('cartBtn');

4.17.6 Hiệu ứng ẩn hiện password ở trang đăng nhập toggleIcon.addEventListener("click", function () { if (inputPassword.type == "password") { toggleIcon.classList = "show fas fa-eye-slash"; inputPassword.type = "text";

} else { toggleIcon.classList = "show fas fa-eye"; inputPassword.type = "password";

4.17.7 Hiệu ứng collapsibles ở trang hồ sơ cá nhân for (let i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var subProfile = this.nextElementSibling; if (subProfile.style.maxHeight){ subProfile.style.maxHeight = null;

} else { subProfile.style.maxHeight = subProfile.scrollHeight + "px"; }

4.17.8 Sự kiện onclick của btn Đăng nhập loginButton.addEventListener ("click", function (e) {

If (inputUserName.value == "" || inputPassword.value == "") { e.preventDefault(); alert("Bạn Chưa Nhập Đủ Thông Tin !");

Else { loginForm.action = "/html/Quang/indexafterlogin.html";

4.17.9 Sự kiện download của trang ứng dụng function show(){ var r = confirm("Tải ứng dụng"); if (r == true) { download("stretched-1366-768-883500.png","img"); } } function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element);

4.17.10 Sự kiện collapsibles của trang trơ giúp var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null;

} else { panel.style.maxHeight = panel.scrollHeight + "px";

4.17.11 Sự kiện hover thay đổi mũi tên ở trang chủ

$('.sort-price-icon').removeClass('fa-chevron-down');

4.17.12 Sự kiện button mở form đánh giá trang đơn mua function openForm() { document.getElementById("myForm").style.display = "block";

} function closeForm() { document.getElementById("myForm").style.display = "none";

4.17.13 Sự kiện keypress ở Thanh tìm kiếm

$(“textarea”).keypress(function(){(this).css(“background-color”,”grey”); });

Return ‘Are you sure want to Quit this page?’;

If ((sessionID !=null)&& (“sessionID=null” && (sessionID !=””)){

GIAO DIỆN TRANG VÍ VOUCHER

Hình 4.15 Giao diện ví voucher

Hình 4.16 Giao diện shopee xu

4.17 SOURCE CODE THUẦN JAVA SCRIPT VÀ JQUERY KẾT HỢP CSS3 TẠO HIỆU ỨNG SIÊU MƯỢT CHO TRANG WEB

SOURCE CODE JQUERY KẾT HỢP CSS3 TẠO HIỆU ỨNG SIÊU MƯỢT CHO TRANGWEB

Tiêu đề	Thiết Kế Giao Diện Website Bán Thiết Bị Chơi Game
Tác giả	Trần Đăng Quang, Nguyễn Hoài Nam, Nguyễn Huy Kiên
Người hướng dẫn	Cù Việt Dũng
Trường học	Trường Đại Học Điện Lực
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	báo cáo chuyên đề
Năm xuất bản	2020
Thành phố	Hà Nội

Định dạng
Số trang	43
Dung lượng	2,47 MB