簡易購物車介面，實現全屏，重新整理，提交提醒
阿新 • • 發佈：2018-11-13
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> tr, td { border: solid 1px lightgray; padding: 0px; margin: 0px; text-align: center; } </style> <script type="text/javascript"> function info() { var v_name = document.getElementById("name1").textContent + "\n"; var v_count = document.getElementById("count").textContent + "件" + "\n"; var v_price = document.getElementById("price").textContent + "\n"; var v_yunfei = document.getElementById("yunfei").textContent + "\n"; var v_total = document.getElementById("total").textContent + "\n"; var s = "商品名稱：" + v_name + "商品數量：" + v_count + "商品單價：" + v_price + "商品運費：" + v_yunfei + "商品名稱：" + v_total + "請確認以上資訊無誤！！！"; var flag = confirm(s); if(flag == true) { alert("訂單已提交！！"); } else { alert("訂單已取消！！"); } } // function fullScreen() {此程式碼錯誤 // window.open(window.location.href, "全屏顯示！", "fullscreen=yes"); // } function reflush() { location.reload(); } function toggleFullScreen() { if(!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods if(document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if(document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if(document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if(document.cancelFullScreen) { document.cancelFullScreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } } </script> </head> <body> <br /> <form id="myForm"> <table> <tr> <td colspan="5"> <p>簡易購物車</p> </td> </tr> <tr> <td>商品名稱</td> <td>數量（件）</td> <td>單價（元）</td> <td>運費（元）</td> <td>合計（元）</td> </tr> <tr> <td id="name1">諾基亞N95</td> <td id="count">1</td> <td id="price">2200</td> <td id="yunfei">20</td> <td id="total">2220</td> </tr> <tr> <td colspan="5"> <input type="submit" value="提交" onclick="info()" /> <input type="button" value="全屏顯示" onclick="toggleFullScreen()" /> <input type="button" value="重新整理本頁" onclick="reflush()" /> </td> </tr> </table> </form> </body> </html>