先上效果圖，先睹為快。(這絕對不是一張圖片。嗯這話怎麼怪怪的)

不要問我iPhone幾，因為我也不知道，沒用過，你懂得。

css樣式部分

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/設定div元素的圓角邊框/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/距離上邊距10px 左右居中/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /當寬高相同時，則為圓/ margin:10px auto; }

/:before 選擇器在被選元素的內容前面插入內容。/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /即使插入的內容為空也需要寫，否則不顯示/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML部分

晚些我又加了點玩意上去

點擊Home鍵可以讓手機亮屏，5秒後又再次熄滅螢幕

亮屏狀態的效果圖，當然中間那張是圖片了(我手機)

JavaScript部分

在按鈕部分的div處綁定onclick事件，調用下面的函數;

var btn_obj = document.getElementById(“screen”); function btn(){ btn_obj.style.background = “url(1.jpg)”; btn_obj.style.backgroundSize = “225px 385px”; setTimeout(“black()",5000); }

function black(){ btn_obj.style.background = “none”; btn_obj.style.backgroundColor = “#0A0A0A”; }