使用HTML代碼實現開燈關燈功能
HTML是一種標記語言,可以用來描述網站的結構和內容,同時也可以實現一些交互功能,比如開燈關燈。
下面是一段簡單的HTML代碼,可以讓用戶通過點擊按鈕來控制燈的開關:
<button onclick="document.body.classList.toggle('dark')"><i class="fa fa-lightbulb-o"></i></button><style>body {
transition: background-color 0.5s;
background-color: #fff;
}
body.dark {
background-color: #333;
}
</style>
這段代碼中,我們使用了HTML的<button>標簽來創建了一個按鈕,當用戶點擊按鈕時,會調用JavaScript的toggle函數,將頁面的樣式從亮色調切換為暗色調,再次點擊時則會切換回亮色調。
此外,我們還使用了<i>標簽來向按鈕中添加了一個圖標,這里使用了Font Awesome提供的圖標庫,可以直接從官網上下載使用。
最后,我們還設置了一些CSS來定義頁面的樣式,在燈開關時會有過渡效果。
總的來說,這段代碼雖然簡單,但卻可以讓網站擁有更多的交互性,提升用戶體驗。
上一篇c json數據調用