一、知识点
本章节主要使用jQuery实现立即购买页面的动态效果
1.地址文本框动态获取
jQuery focus() blur()方法
focus()
当元素获得焦点时，发生focus事件
当鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点
blur()
当元素失去焦点时，发生blur事件
blur()方法触发blur事件，或规定当发生blur事件时运行的函数
2.配送信息动态获取
Input输入框，我们使用this.defaultValue设置默认值
3.送达日期选择
My97DatePicker时间控件
二、代码实现
.html jquert
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>立即购买页面</title>
<link href="css/common.css" rel="stylesheet"/>
<link href="css/purchase.css" rel="stylesheet"/>
<script type="text/javascript">
//
function addressFun1(thisObj){
if(thisObj.value==thisObj.defaultValue){
thisObj.value="";
}
}
//
function addressFun2(thisObj){
if(thisObj.value== ""){
thisObj.value=thisObj.defaultValue
}
}
//配送信息动态获取
function getName(thisObj){
if(thisObj.value != ""){
document.getElementById("receiver_name").innerHTML=thisObj.value;
}
}
//
function getNum(thisObj){
if(thisObj.value != ""){
document.getElementById("receiver_tel").innerHTML=thisObj.value;
}
}
</script>
</head>
<body>
<form class="order-container" id="form1">
<div class="login-box" style="cursor: pointer;">
<span class="iconfont iconfont-tips" onclick="DoWinLogin()"></span>
<span class="login-tips" onclick="DoWinLogin">未注册可在此页面直接下单，已有账号</span>
<span class="login-a">请登录></span>
</div>
<div class="order-item" style="position: relative;margin-top: 24px;">
<h3 class="order-item-hd">收货人信息</h3>
<div class="order-item-content">
<div class="order-item-li">
<label class="order-item-title">收货人</label>
<!-- <input class="order-item-input" placeholder="请输入收货人姓名" type="text"/> -->
<input class="order-item-input" placeholder="请输入收货人姓名" type="text" name="userName" id="userName" onblur="getName(this)"/>
</div>
<div class="order-item-li">
<label class="order-item-title">手机号码</label>
<!-- <input class="order-item-input" placeholder="请输入收货人手机号码" type="text"/> -->
<input class="order-item-input" placeholder="请输入收货人手机号码" type="text" name="userNumber" id="userNumber" onblur="getNum(this)"/>
</div>
<div class="order-item-li">
<label class="order-item-title">所在地区</label>
<select class="order-item-select">
<option value="">河南省</option>
<option value="">河北省</option>
<option value="">江苏省</option>
<option value="">湖南省</option>
</select>
<select class="order-item-select">
<option value="">郑州市</option>
<option value="">南京市</option>
<option value="">杭州市</option>
<option value="">长沙市</option>
</select>
<select class="order-item-select" style="width: 142px;">
<option value="">金水区</option>
<option value="">回族区</option>
<option value="">哈哈区</option>
<option value="">天齐区</option>
</select>
<!-- <span class="order-item-wrong"></span> -->
</div>
<div class="order-item-li">
<label class="order-item-title">详细地址</label>
<div class="order-item-input-box">
<span class="order-item-addr-header">河南省郑州市金水区</span>
<!-- <input placeholder="请输入收货人详细地址" type="text" style="padding-left: 124px;width: 222px;"/> -->
<input type=" text" style="padding-left: 124px; width: 324;" id="address" value="请输入收货人详细地址" onfocus="addressFun1(this)" onblur="addressFun2(this)"/>
</div>
</div>
</div>
</div>
<div class="order-item">
<h3 class="order-item-hd">订购人信息</h3>
<div class="order-item-content">
<div class="order-item-li">
<label class="order-item-title">订购人姓名</label>
<input class="order-item-input" placeholder="请输入订购人姓名"/>
</div>
<div class="order-item-content-hastel" style="display: block;">
<div class="order-item-li">
<label class="order-item-title">订购人手机</label>
<input class="order-item-input" placeholder="请输入订购人手机号码"/>
</div>
</div>
</div>
</div>
<div class="order-item">
<h3 class="order-item-hd">送达日期</h3>
<div class="order-item-content">
<div class="order-item-li">
<label class="order-item-title">送达日期</label>
<input class="order-item-input" placeholder="请输入送达日期" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
</div>
</div>
</div>
<div class="order-item">
<div class="order-item-hd">
<h5>贺卡留言</h5>
</div>
<div class="order-item-box">
<div class="order-item-left">
<textarea class="order-item-left-textarea"
placeholder="贺卡留言：最多30字，生日牌：最多8个字，请在“贺卡留言”中标明."></textarea>
</div>
<div class="order-item-right"></div>
</div>
</div>
<div class="order-item order-item-border-bottom order-item-line">
<h3 class="order-item-hd">核对购物清单</h3>
<div class="order-item-product-list">
<div class="order-item-product-li">
<a href="#" target="_blank"
style="display: inline-block; width: 100%; height: 100%;">
<div class="order-item-product-pic">
<img src="img/cake1.jpg" alt="提拉米苏(约2磅)"/>
</div>
<div class="order-item-product-info">
<p class="order-item-product-name">提拉米苏(约2磅)</p>
</div>
<span class="order-item-product-iprice"data-itemcode="5602003">198</span>
<span class="order-item-product-count">x1</span>
</div>
</div>
</a>
</div>
<div class="order-item-footer">
<div class="order-item-footer-left">
<div class="order-item-footer-send">
<span class="send-title">配送至:</span>
</div>
<div class="order-item-footer-receiver">
<span id="receiver_name">张三</span>
<span id="receiver_tel">15919173982</span>
</div>
</div>
<div class="order-item-footer-right">
<div class="order-item-footer-price">
共<span id="pro_count" class="pro-count">1</span>件商品，总商品金额:
<span id="pro_price" class="pro-price">198</span>
</div>
<div class="order-item-footer-pay">
应付:<span class="pay-price">198</span>
<button class="pay-btn">提交订单</button>
</div>
</div>
</div>
</form>
</body>
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
