当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Web前端付费提交简单小项目

Web前端付费提交简单小项目

2020年07月22日  | 移动技术网IT编程  | 我要评论

pay.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付页面</title>
		<link rel="stylesheet" type="text/css" href="../css/payStyle.css"/>
		<script src="../js/pay.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="box">
			<header>商品信息</header>
			<section>
				<p><input type="checkbox" name="name" id="" value="7980" />Web前端（7980）</p>
				<p><input type="checkbox" name="name" id="" value="7980" />java（7980）</p>
				<p><input type="checkbox" name="name" id="" value="7980" />Python（7980）</p>
			</section>
			<div id="payBox"></div>
			<footer>
				<button type="button">取消</button>
				<span></span>
				<button type="button" >确定</button>
				<span></span>
				<button type="button">支付</button>
			</footer>
		</div>
	</body>
</html>

在这里插入图片描述

succ.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付成功的页面</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				width: 200px;
				/* height: 300px; */
				background: orange;
				margin: 50px auto;
			}
			.box header{
				width: 100%;
				height: 40px;
				background: red;
				text-align: center;
				line-height: 40px;
			}
			.box section{
				width: 100%;
				height: 120px;
				/* background: #008000; */
				text-align: center;
				line-height: 120px;
			}
			.box section #time{
				font-size: 30px;
				color: red;
			}
			.box footer{
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background: #008000;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<header>恭喜你，支付成功</header>
			<section>
				<span id="time">10</span>秒后自动跳转到首页
			</section>
			<footer>
				<button type="button">立即返回</button>
			</footer>
		</div>
	</body>
	<script type="text/javascript">
		
		/* 10秒后自动跳转 */
		var times=10;
		setInterval(function(){
			times--;
			document.getElementById("time").innerHTML=times;
			if(times==0){
				location.href="https://www.kugou.com/yy/html/rank.html";
			}
		},1000);
		//1000是毫秒.就是等于1秒
		/* setInterval(function(){
			
		},1000); */
		
		
		/* 点击理解返回按钮，马上跳转 */
		document.getElementsByTagName("button").item(0).onclick=function(){
			location.href="https://www.kugou.com/yy/html/rank.html";
		}
	</script>
</html>

在这里插入图片描述

payStyle.css

*{
	padding: 0px;
	margin: 0px;
}
.box{
	width: 200px;
	/* height: 300px; */
	margin: 50px auto;
	background: orange;
}
.box header{
	width: 100%;
	height: 40px;
	background: red;
	text-align: center;
	line-height: 40px;
}
/* .box section{
	margin-top: 20px;
} */
.box section p{
	width: 100%;
	height: 40px;
	margin-top: 10px;
	line-height: 40px;
	text-indent: 20px;
	/* background: beige; */
}
#payBox{
	width: 100%;
	height: 40px;
	/* background: beige; */
	line-height: 40px;
	text-indent: 20px;
	
}
.box footer{
	width: 100%;
	height: 40px;
	background: green;
	text-align: center;
	line-height: 40px;
	margin-top: 20px;
}
.box footer span{
	display: inline-block;
	width: 20px;
}

pay.js

window.onload=function(){
	var ins=document.getElementsByName("name");
	/* console.log(ins); */
	var payBox=document.getElementById("payBox");
	/* console.log(payBox); */
	var sum=0;
	/* 点击确定按钮计算总和并显示在页面位置 */
	document.getElementsByTagName("button").item(1).onclick=function(){
		/* console.log(1); */
		for(var i=0;i<ins.length;i++){
			if(ins[i].checked==true){
				var value=ins[i].value;
				sum+=parseInt(value);
			}
			payBox.innerHTML="总计"+sum;
			ins[i].checked="";
		}
	}
	/* 点击取消按钮，总计归零并影藏 */
	document.getElementsByTagName("button").item(0).onclick=function(){
		/* console.log(1); */
		for(var j=0;j<ins.length;j++){
			ins[j].checked=false;
		}
		sum=0;
		payBox.innerHTML="";
	}
	/* 点击支付并跳转页面 */
	document.getElementsByTagName("button").item(2).onclick=function(){
		var res=window.confirm("您确定要支付吗？");
		if(res==true){
			location.href="../html/succ.html";
		}
	}
}

本文地址：https://blog.csdn.net/gcyqweasd/article/details/107500707

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网