Đặt một nút Copy vào Clipboard trên một trang web: 5 bước (với hình ảnh)

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Điều này nghe có vẻ đơn giản, và tôi có thể trông ngớ ngẩn khi đưa nó lên Bảng hướng dẫn, nhưng trên thực tế, nó không dễ dàng như vậy. Có CSS, Jquery, HTML, một số javascript ưa thích và, ồ, bạn biết đấy.

Bước 1: Tạo bút

Có một trang web thú vị tên là Codepen. Trước đây, chỉ để viết mã bằng HTML, tôi đã từng phải

1. Khởi chạy File Explorer.
2. Đi tới Tài liệu của tôi.
3. Tạo tệp txt.
4. Đổi tên tệp đó thành "MyHTMLDoc.html".
5. Nhấn OK để đến hộp thoại cảnh báo.
6. Đóng File Explorer.
7. Mở Visual Studio, mất năm phút.
8. Mở tệp trong Visual Studio, mất thêm năm phút. VS rất chậm.
9. Bắt đầu.
10. Khi hoàn thành, tôi phải mở tệp trong Edge để xem công việc của mình.

Bây giờ, tất cả những gì bạn cần làm là

1. Khởi chạy Edge.
2. Truy cập
3. Ở góc trên bên phải, nhấn Pen mới.
4. Bắt đầu mã hóa.

Xem nó dễ dàng hơn bao nhiêu? Chỉ cần nhập JS, CSS và HTML của bạn vào các hộp tương ứng. Kết quả hiển thị tự động ở bên phải.

Trên thực tế, Codepen tốt hơn rất nhiều, tôi khuyên bạn nên tạo tài khoản của mình ngay bây giờ. Vâng, tôi ghét phải là người quảng cáo, nhưng tôi không thể giúp được. Nó tốt hơn nhiều. Tôi không thể làm gì hơn được.

Hoặc, nếu bạn không muốn tạo tài khoản, bạn có thể tạo pen mà không cần tài khoản. Bạn có thể lưu bút của mình dưới tên người dùng "Captain Anonymous".

Bước 2: Thêm tài liệu tham khảo

Vì chúng ta sẽ sử dụng Jquery và thứ (thực sự) thú vị này được gọi là "Balloon.css", trước tiên chúng ta phải thêm các tham chiếu. Nếu bạn là người mới, tôi sẽ cho bạn biết cách thực hiện việc này trong Codepen.

1. Nhấp vào Cài đặt.
2. Tùy thuộc vào việc tham chiếu là biểu định kiểu hay tập lệnh, hãy nhấp vào CSS hoặc Javascript.
3. Trong Thêm bên ngoài (Javascript hoặc CSS), hãy thêm các tham chiếu.

Thêm vào:

bla bla bla: BLAAAAAAA !!!!

Bây giờ, hãy loại bỏ điều đó và đưa vào thẻ HTML liên kết đến CDN yêu thích của bạn cho Jquery và Balloon.css.

Bước 3: Mã

Dưới đó, thêm mã này.

codepen.io/slate-coding/pen/oepQpX

Sao chép / dán mã vào bút của bạn.

Bước 4: Thay đổi mã đó để phù hợp với nhu cầu của bạn

Bạn có thể thao tác tùy thích với bút phù hợp với nhu cầu của mình, sau đó sao chép và dán mã vào bất cứ đâu bạn muốn.

Bước 5: Demo

codepen.io/alexvgs/pen/oepQpX