使用前必读，大家都很熟悉了，大部分的做法是，下方有个我已阅读的勾选框，如果勾选了，则下一步按钮可点击；如果取消勾选，则下一步按钮禁用。
1.勾选checkbox，解除下一步禁用
// 通过是否勾选，禁用下一步按钮
<div>
<label style="font-weight: normal;"><input type="checkbox" ng-model="ifChecked">我已仔细阅读并同意以上规定！</label>
</div>
<button class="btn btn-primary" ng-click="applyread.nextStep()" style="padding:6px 28px;border-radius:0" ng-disabled="ifChecked!=true">下一步</button>
效果预览：
QQ截图201803271522014.png
QQ截图201803271522225.png
现在觉得，用户要点两下（先勾选，再点下一步），会比较累，所以取消之前的做法。
真心觉得，程序员是懒人中的懒人，多点一下都感觉累。
2. 新的做法 :按钮默认禁用，倒计时5秒后，解除禁用，动态显示倒计时，貌似是比之前体验好了点。
效果预览
QQ截图201803271519321.png
QQ截图201803271520302.png
QQ截图201803271520083.png
默认展示
<button class="btn btn-primary" ng-click="applyread.nextStep()" style="padding:6px 28px;border-radius:0" disabled id="ifToNext">
<span>请仔细阅读，5秒后，可点击下一步！</span>
</button>
js倒计时
// 5s倒计时
var timer = window.setInterval(fiveSecondsCountDown, 1000);
var num = 5;
function fiveSecondsCountDown(){
num--;
if(num == 0){
window.clearInterval(timer);
$("#ifToNext span").html("我已阅读，进入下一步！");
$("#ifToNext").attr("disabled", false);
}else{
$("#ifToNext span").html("请仔细阅读，"+num+"秒后，可点击下一步！")
}
}
注意1：如果button带有disabled为真属性时，设置html的值是无效的。
所以我再button内层包含了span标签，用于改变渲染其值。
注意2：设置循环定时器，记得清除掉。
有设置就要有清除，否则，定时器会不停运作，直至浏览器瘫痪。
3. 完整代码
3.1 完整的html apply_read.html
<div class="modal-header">
<button type="button" class="close focus-outline-0" ng-click="applyread.cancel()"><span>×</span></button>
<h5 class="modal-title">{{applyread.dataset.title}}</h5>
</div>
<div class="modal-body clearfix">
<div class="row" style="margin: 0 15px">
<textarea readonly style="height: 500px;width:100%;overflow-y: auto;border-radius:10px;border-color:#ccc;padding:12px;">
上海宝信软件股份有限公司：
我司郑重承诺遵守本承诺书中的所有条款，若我司派遣人员（含我司员工和第三方人员）有违反本承诺书的行为发生，由此带来的一切民事、行政、刑事责任及损失由我司全部承担，贵司无需承担或分担。具体承诺如下：
1. 我司承诺将严格遵守贵司制定的《宝之云机房出入管理制度》开展人员管理和作业管理，若因违规该管理制度中相关条款而造成的人员伤亡，我司全权承担。
2. 我司已知晓宝之云机房的消防系统采用惰性气体防护，我司派遣人员在听到消防报警的30秒钟内必撤离机房；若未能按要求撤离机房，由此造成的人员伤亡，我司全权承担。
3. 我司承诺在人员管理上做到以下几点：
a) 所有进入宝之云机房的人员提前至少1个工作日申请，并在申请的时间窗口内持身份证在机房现场核验登记换证并按要求完成安全交底后进入机房。
b) 所有进入宝之云机房的人员做好个人防护，不穿短袖、裙子、短裤、裸露脚部任何位置的鞋子进出机房；特殊作业人员（例如：电工、电/气焊工等）必须持有国家有关机关颁发的上岗操作证，并必须穿戴专业防护工作服和工作鞋。
c) 所有进入宝之云机房的人员承诺不拍照不录像不录音、不携带任何食品、不携带任何易燃易爆或有毒有害物品、不进出我司托管设备所在区域以外的任何区域、不操作我司托管设备以外的任何设备设施。
d) 所有进入宝之云机房的人员因工作需要所携带的工器具、物料等在进入机房前登记，否则贵司可不予协助办理出门手续。
e) 所有进入宝之云机房的人员因工作需要需敲打/登高或用电/水或动用电/气焊/明火的，必须向贵司机房工作人员进行报备，获得许可后方可实施。
4. 我司承诺在设备管理上做到以下几点：
a) 所有进出宝之云机房的设备需提前至少1个工作日申请，并在申请的时间窗口内由申请中的指定人员持身份证在机房现场核验登记换证后进行实施。
b) 为了响应国家节能减排的号召，我司托管设备在上架安装时，遵照机房冷热通道隔离要求，确保设备出风口对准热通道，并对机柜空置U位做好盲板隔离措施。
c) 我司托管设备在机柜内的连线，承诺进行整理并捆扎固定，确保线缆对设备出风口无遮挡。
d) 我司托管设备跨机柜之间的连线，则连线必放在走线架中，确保无飞线等情况发生；布放在走线架中的线缆排列整齐，外皮无损伤，并进行捆扎固定。
e) 我司承诺严格按机柜租赁合同中的单机柜供电负荷安装设备；若超负荷安装设备，由此造成的跳闸故障及经济损失由我司全权承担。
f) 我司托管设备与贵司现场负责人确认核对后，方作为正式托管；否则贵司在设备退场时不予协助办理出门手续。
g) 我司若有设备临时堆放需求，将提前至少1个工作日申请，且确保临时堆放物品的长宽高不小于0.5米且未拆箱，临时堆放期限不超过7天。
5. 每次进出宝之云机房，我司将在申请中指定当次作业的现场负责人，并承诺现场负责人在作业期间全程在现场对作业人员和内容负责，在作业开始前和结束后向贵司现场负责人报备。
6. 贵司现场人员有权对我司的现场作业进行检查，发现有违反本承诺书中任一条款的行为发生，有权立即叫停我司的现场作业；并在我司整改完毕且贵司现场人员确认整改有效后，方可继续现场作业。
本承诺书自签字日起生效，合同到期后自行作废；续签合同需重新签订承诺书。未尽事宜，双方协商解决后，在5个工作日内双方书面确认后修改或补充至本承诺书中执行。
承诺人：（***单位）
××××年××月××日
</textarea>
<!--<div>-->
<!--<label style="font-weight: normal;"><input type="checkbox" ng-model="ifChecked">我已仔细阅读并同意以上规定！</label>-->
<!--</div>-->
<div class="modal-footer">
<!--<button class="btn btn-primary" ng-click="applyread.nextStep()" style="padding:6px 28px;border-radius:0" ng-disabled="ifChecked!=true">下一步</button>-->
<button class="btn btn-primary" ng-click="applyread.nextStep()" style="padding:6px 28px;border-radius:0" disabled id="ifToNext">
<span>请仔细阅读，5秒后，可点击下一步！</span>
</button>
</div>
</div>
</div>
3.2对应的controller applyRead.controller.js
/**
* Created by adminZz mh.
*/
(function() {
'use strict';
angular
.module('app.ec')
.controller('ApplyReadController', function ($scope, $uibModalInstance, params) {
var self = this;
//self.userModel = angular.copy(params.object) ;
// 5s倒计时
var timer = window.setInterval(fiveSecondsCountDown, 1000);
var num = 5;
function fiveSecondsCountDown(){
num--;
if(num == 0){
window.clearInterval(timer);
$("#ifToNext span").html("我已阅读，进入下一步！");
$("#ifToNext").attr("disabled", false);
// $("#ifToNext").attr("disabled", false).children("span").html("我已阅读，进入下一步！");
}else{
$("#ifToNext span").html("请仔细阅读，"+num+"秒后，可点击下一步！")
}
}
self.dataset = params;
// 进入下一步
self.nextStep = function () {
$uibModalInstance.close('success');
};
// 取消弹出框
self.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
})();
3.3 触发弹窗
// 新建申请
vm.createApply = function(){
saveLastSearchParams();
var modal = $uibModal.open({
animation: true,
size: 'lg',
templateUrl: 'ui/apply_read.html',
controller: 'ApplyReadController',
controllerAs: 'applyread',
resolve:{
params: function () {
return {
title:"宝之云机房现场安全承诺书",
object:{}
};
}
}
})
.result.then(function (result) {
if(result=='success'){
$location.path("/create-apply");
return false;
}
});
}
mark： 倒计时的同时，让内容自动滚动，这样更懒了
添加overflow-y: scroll;
<textarea id="scrollReading" readonly style="height: 500px;width:100%;overflow-y: scroll;border-radius:10px;border-color:#ccc;padding:12px;">
// 内容，此处省略一万字。。。
</textarea>
使用scrollTop滚动
$("#scrollReading")[0].scrollTop += 像素值;
最后1s让它复位，scrollTop = 0；
// 5s倒计时
var timer = window.setInterval(fiveSecondsCountDown, 1000);
var num = 5;
function fiveSecondsCountDown(){
num--;
if(num == 0){
window.clearInterval(timer);
$("#ifToNext span").html("我已阅读，进入下一步！");
$("#ifToNext").attr("disabled", false);
$("#scrollReading")[0].scrollTop = 0;
}else{
$("#ifToNext span").html("请仔细阅读，"+num+"秒后，可点击下一步！")
$("#scrollReading")[0].scrollTop += 80;
}
}
网友评论