倒计时
- DOM
<div class="djs">
<div class="timer_box">
距离活动<label id="beginOrEnd">开始</label>还有
<span id="timer_day">0</span>
天
<span id="timer_hour">0</span>
时
<span id="timer_minute">0</span>
分
<span id="timer_second">0</span>
秒
</div>
</div>
- JS
做秒杀或者倒计时活动，最好使用服务器时间，
js： new Date() 获取的是客户端时间
console.log('header-time')
console.log(res.header.Date)
console.log(new Date(res.header.Date).getTime() + 3600 * 8)
可以通过请求头中的时间来同步服务器时间，但是请求头中的时间是GMT时间，与正常时间相差8个小时时差
$(function(){
var activeTimer = setInterval("timerCount(2017,03,16)", 1000);
});
function timerCount(year,month,day) {
// 距离开始还有多长时间
var end = new Date(year+'/'+month+'/'+day).getTime();
now = new Date().getTime(),
timeObj = {};
var lessTime = end - now;
if(lessTime <= 0){
$("#timer_day").text(0);
$("#timer_hour").text(0);
$("#timer_minute").text(0);
$("#timer_second").text(0);
}else{
timeObj.day = Math.floor(lessTime / 1000 / 60 / 60 / 24);
dayTime = timeObj.day * 24 * 3600 * 1000;
timeObj.hour = Math.floor(lessTime / 1000 / 60 / 60 % 24);
hourTime = timeObj.hour * 3600 * 1000;
timeObj.minute = Math.floor(lessTime / 1000 / 60 % 60);
minuteTime = timeObj.minute * 60 * 1000;
timeObj.second = Math.floor(lessTime / 1000 % 60);
secondTime = timeObj.second * 1000;
$("#timer_day").text(timeObj.day);
$("#timer_hour").text(timeObj.hour);
$("#timer_minute").text(timeObj.minute);
$("#timer_second").text(timeObj.second);
}
}
验证码倒计时
<a class="btn-forget" @click="getCaptcha" v-if="capNum==0">{{capStr}}</a>
<a class="btn-forget" v-else style="color: #ccc">{{capStr}}</a>
data(){
return {
capStr: '发送验证码',
capNum: 0,
}
}
// 获取验证码
getCaptcha() {
let num = 5,
str = ''
this.capNum = 1
let t = setInterval(() => {
if (num > 1) {
num--
str = '重发(' + num + 's)'
this.capStr = str
console.log(str)
} else {
this.capStr = '发送验证码'
this.capNum = 0
clearInterval(t) //记得清除倒计时
}
}, 1000)
}
获取checkbox选中值
- 获取所有被选中的checkbox值，并返回数组
var chks = "";
$("input[name=chkBox]:checked").each(function(i){
chks += (","+$(this).parents("tr").attr("data-productid"));
});
console.log(chks);
chks = chks.split(","); //字符串转化为数组
全选触发与反触发（jQuery版本）
- 定义DOM【一个全选按钮，其余的为checkbox单选组】
<div class="box">
<h4><input type="checkbox" name="checkAll" class="checkAll" onclick="checkAll(this,'.checkOne')">全选</h4><hr>
<p><input type="checkbox" class="checkOne" value="1">单选</p>
<p><input type="checkbox" class="checkOne" value="2">单选</p>
<p><input type="checkbox" class="checkOne" value="3">单选</p>
<p><input type="checkbox" class="checkOne" value="4">单选</p>
<p><input type="checkbox" class="checkOne" value="5">单选</p>
</div>
- 首先实现：点击全选之后，单选组全部选中
注意要用prop()函数，checked用attr函数好像不太奏效
function checkAll(obj,subSel){
$(subSel).each(function(){
$(subSel).prop("checked",$(obj).prop("checked")); //让单选组跟随全选框的状态变化
});
}
- 现在来实现单选组里面的某一个没有选中的时候，全选按钮就取消选中
var ocheckOne = $(".checkOne"); //单选
var ocheckAll = $(".checkAll"); //全选
ocheckOne.click(function(){
if(!$(this).prop("checked")){ //如果当前的单选不选中，则全选不选中
ocheckAll.prop("checked",false);
}
var flag = true;
ocheckOne.each(function(){ //点击单选按钮的时候，遍历观察所有的单选按钮
if(!$(this).prop("checked")){ //如果有一个按钮没有选中，将标志值置为false
flag = false;
}
});
if(flag){
ocheckAll.prop('checked',true);
}
});
多个输入框输入4位数字，输完一个自动跳到下一个
image.png
<!-- 输入核验码 start -->
<view class="query">
<view class="query_num_block">
<!-- <input type='number' class="num_item_block" wx:for="{{[1,2,3,4]}}" wx:key="{{index}}" disabled bindtap='onFocus' value="{{iptValue.length>=index+1?iptValue[index]:''}}" /> -->
<input type='number' class="num_item_block" disabled bindtap='onFocus' value="{{iptValue[0]}}" />
<input type='number' class="num_item_block" disabled bindtap='onFocus' value="{{iptValue[1]}}" />
<input type='number' class="num_item_block" disabled bindtap='onFocus' value="{{iptValue[2]}}" />
<input type='number' class="num_item_block" disabled bindtap='onFocus' value="{{iptValue[3]}}" />
</view>
<!--实际是在下面输入，上面做赋值-->
<input name="password" type="number" password="{{true}}" maxlength="4" class='hidden_ipt' focus="{{isFocus}}" bindinput="setValue"></input>
</view>
// 设置聚焦弹窗键盘
onFocus: function(e) {
console.log('onFocus...', e)
var that = this;
that.setData({ isFocus: true });
},
// 设置值给input框
setValue: function(e) {
var that = this;
that.setData({ iptValue: e.detail.value });
console.log('setValue:', e.detail.value, typeof(e.detail.value), 'iptvalue:', this.data.iptValue, typeof(this.data.iptValue))
},
