简易购物车界面，实现全屏，刷新，提交提醒

<!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>
简易购物车界面，实现全屏，刷新，提交提醒

猜你喜欢
