Máy tính chỉ sử dụng HTML và CSS
|
Gần đây, tôi đã mở rộng kiến thức về CSS của mình và không thể nghĩ ra cách nào thiết thực hơn để sử dụng những gì tôi đã học hơn là tạo ra thứ gì đó mà bất kỳ người nào có lẽ cũng sẽ sử dụng JavaScript để làm. Tôi đã tạo ứng dụng pixel art này và máy tính này. Đây là cách tôi làm máy tính Show
Các quy tắcBất cứ khi nào bạn đặt ra cho mình một thử thách, bạn nên xác định đúng mục tiêu của mình. Trong trường hợp này, không có JavaScript nào đơn giản, không có tệp JS, không có thẻ script và không sử dụng trình xử lý sự kiện trong HTML. Rất phổ biến đối với các dự án 'CSS thuần túy' sử dụng các ngôn ngữ như HAML và SCSS, những ngôn ngữ này sẽ biên dịch thành HTML và CSS tĩnh thông thường tương ứng, vì vậy kết quả cuối cùng vẫn là HTML và CSS thuần túy. Có rất nhiều dự án điên rồ sử dụng chúng ngoài tự nhiên. Tôi đã chọn không sử dụng chúng cho dự án này, chỉ để bắt đầu đơn giản. Bạn có thể xem codebase đầy đủ của tôi tại đây Tại sao làm điều này?Tại sao không? Tôi đã làm điều đó như thế nào?nút radioĐầu tiên là tương tác người dùng. Làm cách nào để bạn phát hiện ra rằng người dùng đã nhấp vào nút mà không có JS? . Với và chúng tôi nhận được Hãy giải thích. Các nhãn được kết nối với các nút Biến và bộ đếm CSSBây giờ để tạo ra một số. Chúng ta cần sử dụng các biến CSS. Để khai báo một thuộc tính, hãy tạo tên thuộc tính bắt đầu bằng dấu gạch ngang kép ( và chúng tôi nhận được Trình diễn các biến và bộ đếm CSSViệc lựa chọn các nút radio đặt biến Ở đây, các đầu vào sẽ đặt tính toán CSSCSS có chức năng Bộ chọn CSS Nếu chúng ta thêm một bộ đầu vào để chọn hoạt động, chúng ta có thể sử dụng một phương pháp tương tự như trên để có câu trả lời cuối cùng. Sau đó, chỉ cần nắm bắt các giá trị trong bộ đếm và hiển thị nó. Thuộc tính @property và @counter-styleVới những gì chúng tôi có cho đến nay, chúng tôi có thể tạo ra một máy tính chức năng. Tuy nhiên, có một lỗ hổng và đó là thiếu số thập phân. Vấn đề là bộ đếm chỉ có thể chứa số nguyên. Vì vậy, chúng ta cần chia số thành các phần nguyên và phân số. Điều đầu tiên chúng ta cần cho việc này là một cách để làm tròn số (chúng ta không thể sử dụng bộ đếm vì chúng không thể được đưa vào thì mọi giá trị được gán cho Sử dụng Đối số thứ 2 trong hàm Gói (lạiĐây là tất cả các yếu tố chính để tạo ra một máy tính. Có một vài điều còn lại để làm. Có kiểu dáng (vâng, tôi cũng đã sử dụng CSS cho mục đích thực tế của nó). Bạn cũng có thể nhận thấy rằng thiết lập hiện tại cung cấp cho chúng tôi một bộ đầu vào riêng cho từng chữ số của một số, chúng tôi có thể sử dụng Chúng ta có thể làm điều này bao xa nữa? . Mặc dù bằng cách sử dụng thứ gì đó để tạo HTML, bạn có thể tiến khá xa. Về lý thuyết, có thể đưa điều này đến gần hơn với một máy tính khoa học. Ví dụ, để thực hiện các hàm lượng giác, chúng ta có thể khai thác tính đối xứng và tính tuần hoàn của chúng, sau đó sử dụng các xấp xỉ. Tôi nghĩ phần khó nhất là sử dụng dấu ngoặc, vì tôi không biết cách tự động thêm dấu ngoặc vào Phần kết luậnTôi đã tạo ra máy tính này, chỉ như một bài tập thú vị và để làm điều gì đó ngớ ngẩn. Sự vô lý là thứ thúc đẩy mong muốn của tôi để làm điều này. Tuy nhiên, tôi đã học được rất nhiều trong khi làm điều này. Mặc dù tôi vẫn sẽ phải sử dụng google mỗi khi muốn căn giữa một số văn bản, nhưng tôi đã có rất nhiều niềm vui. Nếu bạn có ý tưởng cho một dự án vô nghĩa, tôi khuyên bạn nên theo đuổi nó. Rốt cuộc, tại sao không? Bạn có thể tạo một máy tính bằng HTML và CSS không?Để thiết kế máy tính cơ bản, chúng tôi sẽ sử dụng HTML, CSS và JavaScript . HTML được sử dụng để thiết kế cấu trúc cơ bản của máy tính. Các kiểu CSS được sử dụng để áp dụng các kiểu trên máy tính và JavaScript được sử dụng để thêm chức năng tính toán.
Làm cách nào để tạo máy tính bằng HTML?Ví dụ về Máy tính sử dụng HTML. Bài Viết Liên Quan
Bản quyền © 2021 Xây Nhà Inc.
|
