单选按钮
<li class="item-input">
<div class="item-left">售后方式</div>
<div class="item-right">
<label class="label-radio">
<input type="radio" name="invoiceType" checked="" id="commercialInvoice">
<span class="radio"><i class="icon-complete-on"></i></span>退货退款
</label>
<label class="label-radio">
<input type="radio" name="invoiceType" id="inputSpecialInvoice">
<span class="radio"><i class="icon-complete-on"></i></span>仅退款
</label>
</div>
</li>
js操作Dom元素
function tips(id,content){
document.getElementById(id+"Span").innerHTML = "<font color='red'>"+content+"</font>";
}
function checkForm(){
// 判断用户名不能为空:
var username = document.getElementById("username").value;
if(username == ""){
document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>";
return false;
}
var password = document.getElementById("password").value;
if(password == ""){
document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";
return false;
}
}
------------------------------------------------------------------------------------------------------------------------
绑定手机验证码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>个人中心</title>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/css/mobile/base.css">
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/css/mobile/common.css">
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/css/mobile/user.css" />
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/mobileResponsive750.js"></script>
</head>
<body>
<section class="container-foot">
<section class="user-header-img" style="">
<!-- <a class="icon icon-set icon-set-site" href="user_setting.html"></a> -->
<figure class="user-img">
<img src="${headImg}">
</figure>
<p class="user-chose">${wxNick}</p>
</section>
<ul class="list-block">
<li class="list-item list-item-title"><a class="item-left"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do">我的订单</a>
<a class="item-right"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do">
<span class="item-right-txt">查看全部</span> <i class="icon-next ml20"></i>
</a></li>
<li class="order-type">
<section class="bar-tab">
<a class="tab-item external"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do#order-pay">
<span class="icon icon-payment"></span> <span class="tab-label">待付款</span>
<c:if
test="${listObligationSize != null && listObligationSize !=''}">
<span class="badge">${listObligationSize}</span>
</c:if>
</a> <a class="tab-item external"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do#order-deal">
<span class="icon icon-accept"></span> <span class="tab-label">待受理</span>
<c:if test="${listAcceptSize != null && listAcceptSize !=''}">
<span class="badge">${listAcceptSize}</span>
</c:if>
</a> <a class="tab-item external"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do#order-send">
<span class="icon icon-send-goods"></span> <span class="tab-label">待发货</span>
<c:if test="${listSendSize != null && listSendSize !=''}">
<span class="badge">${listSendSize}</span>
</c:if>
</a> <a class="tab-item external"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do#order-receive">
<span class="icon icon-receiving"></span> <span class="tab-label">待收货</span>
<c:if test="${listReceiveSize != null && listReceiveSize !=''}">
<span class="badge">${listReceiveSize}</span>
</c:if>
</a> <a class="tab-item external"
href="<%=request.getContextPath()%>/mobile/odr/order/sheet/orderWXList.do#order_cancel">
<span class="icon icon-refund"></span> <span class="tab-label">退款/售后</span>
<c:if test="${listCancelSize != null && listCancelSize !=''}">
<span class="badge">${listCancelSize}</span>
</c:if>
</a>
</section>
</li>
</ul>
<ul class="list-block">
<li class="list-item">
<div class="item-left">
<i class="icon-bgRound icon-bg-yellow icon-money"></i> <span
class="dib vm">我的余额</span>
</div> <c:if test="${balance != null && balance !=''}">
<div class="item-right">${balance}元</div>
</c:if> <c:if test="${balance == null || balance ==''}">
<div class="item-right">0.00元</div>
</c:if>
</li>
<li class="list-item">
<div class="item-left">
<i class="icon-bgRound icon-bg-violet icon-jifen"></i> <span
class="dib vm">我的积分</span>
</div> <c:if test="${integral != null && integral !=''}">
<div class="item-right">${integral}</div>
</c:if> <c:if test="${integral == null || integral ==''}">
<div class="item-right">0</div>
</c:if>
</li>
<li class="list-item"><a class="item-left"
href="<%=request.getContextPath()%>/mobile/menber/records/recordsList.do">
<i class="icon-bgRound icon-bg-blue icon-order"></i> <span
class="dib vm">消费记录</span>
</a> <a class="item-right" href="javascript:void(0);"> <i
class="icon-next"></i>
</a></li>
<li class="list-item"><a class="item-left"
href="<%=request.getContextPath()%>/mobile/mbr/invoice/invoiceList.do">
<i class="icon-bgRound icon-bg-orange icon-fapiao"></i> <span
class="dib vm">我的发票</span>
</a> <a class="item-right" href="javascript:void(0);"> <i
class="icon-next"></i>
</a></li>
<!-- <li class="list-item">
<a class="item-left" href="user_coupon.html">
<i class="icon-bgRound icon-bg-green icon-coupon"></i>
<span class="dib vm">我的优惠券</span>
</a>
<a class="item-right" href="javascript:void(0);">
<i class="icon-next"></i>
</a>
</li> -->
</ul>
<ul class="list-block">
<li class="list-item"><a class="item-left"
href="<%=request.getContextPath() %>/mobile/mbr/wxOpenMemberAccount.do?code=${memberCode}">
<i class="icon-bgRound icon-bg-yellow icon-safe"></i> <span
class="dib vm">账户管理</span>
</a> <a class="item-right" href="javascript:void(0);"> <i
class="icon-next"></i>
</a></li>
<li class="list-item"><a class="item-left"
href="<%=request.getContextPath()%>/mobile/shipping/address/addressList.do">
<i class="icon-bgRound icon-bg-blue icon-site"></i> <span
class="dib vm">地址管理</span>
</a> <a class="item-right" href="javascript:void(0);"> <i
class="icon-next"></i>
</a></li>
<!-- <li class="list-item">
<a class="item-left" href="user_about.html">
<i class="icon-bgRound icon-bg-violet icon-about"></i>
<span class="dib vm">关于我们</span>
</a>
<a class="item-right" href="javascript:void(0);">
<i class="icon-next"></i>
</a>
</li> -->
</ul>
</section>
<!--底部工具栏start-->
<jsp:include page="${contextPath }/includes/mobileCommon.jsp" />
<!--底部工具栏end-->
<!--绑定手机弹窗-->
<div id="bindTel" style="display: none;">
<a class="close-picker"><i class="icon-cross"></i></a>
<div class="bind-tel">
<div class="input-wrap">
<i class="icon-user"></i> <input type="text" class="phone" />
</div>
<div class="input-wrap">
<i class="icon-safe"></i> <input type="number" class="verification" />
<a class="btn" onclick="phoneSend()" name="generate-verify-code">获取验证码</a>
</div>
</div>
</div>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/layer.js"></script>
<script>
layer.open({
title : '请绑定手机号',
content : $('#bindTel').html(),
btn : [ '确定', '取消' ],
className : 'layer-modal',
success : function(elem) {
$('.close-picker').on('click', function() {
layer.close($(elem).attr('index'));
})
},
yes : function(index) {
var phone = $(".phone").eq(1).val();
var verification = $(".verification").eq(1).val();
$.ajax({
url : "phoneSend.do",
type : "post",
dateType : "json",
data : {
phone : phone,
verification : verification
},
success : function(result) {
if (result.result) {
alert("验证成功");
layer.close(index);
} else {
alert("验证失败,验证码错误");
}
}
})
}
});
$(function() {
$('.tab-item').removeClass('active')
$('.wd').addClass('active')
$('.wd').children('.icon').removeClass('icon-home')
$('.wd').children('.icon').addClass('icon-user-on')
/* $("a[name='generate-verify-code']").on("click", phoneSend) */ //绑定点击事件
})
function phoneSend() {
if(!(/^1[345789]\d{9}$/.test($(".phone").eq(1).val()))){
alert("手机号码有误，请重填");
return false;
}
// TODO 倒计时重新获取验证码
var verifyCode = Math.ceil(Math.random() * 900000) + 100000;
verifyCodeValue = verifyCode.toString();
//alert("验证码发送成功，本次支付的验证码是：【" + verifyCode + "】");
var timeout = 60;
$("a[name='generate-verify-code']").off("click");
$("a[name='generate-verify-code']").attr("onclick", "");
var interval = setInterval(function() {
if (timeout > 0) {
$("a[name='generate-verify-code']").text(timeout + "s");
} else {
$("a[name='generate-verify-code']").on("click", phoneSend).text("重新获取");
clearInterval(interval);
}
timeout--;
}, 1000);
var phone = $(".phone").eq(1).val();
var verification = $(".verification").eq(1).val();
console.log();
$.ajax({
url : "phoneSend.do",
type : "post",
dateType : "json",
data : {
phone : phone
},
success : function(result) {
if (result.result) {
alert("发送成功");
} else {
}
}
})
}
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
点击复制按钮
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<div>
订单编号：
<span class="order-num" id="target">${order.sheetCode}</span>
<!-- <a class="btn r">复制</a> -->
<button class="btn r" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
复制
</button>
</div>
$(document).ready(function(){
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
alert("复制成功",1500);
e.clearSelection();
console.log(e.clearSelection);
});
});
HTLM5
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- -1- 9月15日的腾讯新闻里，有一则让人看红了眼眶。 在台湾内埤海滩，一位小伙子携女友旅游，看到一8岁女童遭大...
