HTML5 JavaScript CSS 表单实现购物优惠打折

最新推荐文章于 2024-05-05 10:55:46 发布

WJT0129

最新推荐文章于 2024-05-05 10:55:46 发布

阅读量1.2k

点赞数 1

文章标签： js css html javascript switch

本文链接：https://blog.csdn.net/weixin_50756386/article/details/112322254

版权

HTML5 JavaScript CSS 表单实现购物优惠打折

文章目录

- HTML5 JavaScript CSS 表单实现购物优惠打折
前言
一、CSS代码如下，通过外链接实现交互。
二、HTML5代码表单实现
三、实现效果如下图
总结
- - 我是嘤嘤怪

前言

提示：本案例实现购物结算时打折优惠,总金额满减进行礼物赠送。

提示：以下是本篇文章正文内容

一、CSS代码如下，通过外链接实现交互。


.no1
{
	width: 400px;
	margin: auto;
	border: 10px solid #ccc;
}

二、HTML5代码表单实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="no1.css"/>
		<script type="text/javascript">  
			
			function fun1(){  //定义匿名函数fun1()
				var total = 0; //定义变量 total
				var a = document.getElementById("a").value; //定义变量a，并赋值为单价文本框的value值
				var b = document.getElementById("b").value; //定义变量b，并赋值为重量文本框的value值
				total = a * b; //将 a 与 b 之积赋值给变量 total
				
				if(isNaN(a) || isNaN(b) )   //用if判断语句判断单价和重量文本框输入值是否为数值类型
				{
					alert("请输入正确的单价和数量")
					}else{
						alert("亲! 正在计算中，请稍后")
					}
					
					
					switch(document.getElementById("hy").value)//用switch多分支语句，根据支付方式的类型选择，打折金额并赋值个total
					{
						case "0":          
						total = total * 0.9  //打九折
						break;
						case "1":
						total = total * 0.8  //打八折
						break;
						case "2":
						total = total * 0.6	 //打6折 		
						default:
						total = total * 0.5  //打五折
						break;
					}
				
				
				
				if(total >= 2000){ //if 条件判断总金额total进行赠送礼物
				  alert("结算支付后赠送Eminem限量签名专辑")
				}else if(total >= 1000){
				  alert("结算支付后赠送刘聪巡演门票一张")
				}else if(total >= 500){
				  alert("结算支付后赠送姜云升网易云")	
				}else{
				  alert("感谢你的购买,祝你生活愉快！") 
				}
				
				document.getElementById("c").value = total;//将total的值赋值给总价文本输入框
				}
		</script>
	</head>
	<body>
		<div class="no1">
			<form action="" method="">
				<h1>音乐专辑购买</h1>
				<img src="eminem.JPG" width="100px" height="100px" > 
				<img src="姜云升.JPG" width="100px" height="100px" >
				<img src="xxxTentaction.JPG" width="100px" height="100px" > 
			     <br>
				
				<label>专辑单价：</label>
				<input type="text"  id="a" value="520"/>元/张
				<br>
				
				<label>专辑数量：</label>
				<input type="text"  id="b" value="1314"/>张
				<br>
				
				支付方式：
				<select id="hy">
					<option value="0">现金支付</option>
					<option value="1">支付宝</option>
					<option value="2">微信</option>
					<option value="3">比特币</option>
				</select>
				<br>
				
				<input type="button" onclick="fun1()"  value="结算"/>
				<!--用button属性。onclick属性：通过点击调用函数fun1。>
				<!--用reset 属性重置数据，也就是恢复默认值，通俗讲就是恢复出厂设置-->
				<input type="reset" value="归零"/>
				<br>
				
				<label>总计</label>
				<input type="text"  id="c" value=""/>元
				<br>
				
				
				
			</form>
			
		</div>
	</body>
</html>

三、实现效果如下图

在这里插入图片描述

总结

专辑单价文本框和专辑数量不能为空，输入类型为数值类型。
金额满减进行打折，购满赠送不同类型礼物。
结算金额通过选择“支付方式”进行打折。

我是嘤嘤怪

WJT0129

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
HTML5 JavaScript CSS 表单实现购物优惠打折

HTML5 JavaScript CSS 表单实现购物优惠打折文章目录HTML5 JavaScript CSS 表单实现购物优惠打折前言一、CSS代码如下，通过外链接实现交互。二、HTML5代码表单实现三、实现效果如下图总结我是嘤嘤怪前言提示：本案例实现购物结算时打折优惠,总金额满减进行礼物赠送。提示：以下是本篇文章正文内容一、CSS代码如下，通过外链接实现交互。.no1{
复制链接

扫一扫