搜索到
2
篇与
JavaScript
的结果
-
Vue倒计时组件 开源cool的倒计时组件，修改后也可直接使用在网页中，非常好用的一个倒计时控件1. 组件源码可以在cool uni中下载<template> <div class="cl-countdown"> <template v-for="(item, index) in list"> <div class="cl-countdown-item" :key="index" :style="[customStyle]" v-if="item.visible"> <span class="cl-countdown__number" :style="[numberStyle]">{{ item.value }}</span> <span class="cl-countdown__splitor" :style="[splitorStyle]">{{ item.splitor }}</span> </div> </template> <div class="cl-countdown-item" v-if="isMillisecond"> <span class="cl-countdown__number">{{ millisecond }}</span> </div> </div> </template> <script> function isArray(value) { if (typeof Array.isArray === 'function') { return Array.isArray(value); } else { return Object.prototype.toString.call(value) === '[object Array]'; } } /** * countdown 倒计时 * @description 倒计时, 支持布局显示, 自定义样式 * @property {String, Array} splitor 图片链接 * @property {Array} layout 布局, ["day", "hour", "minute", "second"] * @property {String} mode default 默认 | simple 是否精简：为00时自动隐藏，默认dfault * @property {Number} day 还有多少天 * @property {Number} hour 还有多少小时 * @property {Number} minute 还有多少分钟 * @property {Number} second 还有多少秒 * @property {Date, String} datetime 结束时间 * @property {Boolean} isMillisecond 是否带有毫秒 * @property {Object} customStyle 自定义样式 * @property {Object} numberStyle 数字样式 * @property {Object} splitorStyle 分隔符样式 * @example <cl-countdown :day="5" /> */ export default { name: "countdown", props: { // 分隔符 [day, hour, minute, second] splitor: { type: [String, Array], default: "default" }, // 布局 layout: { type: Array, default: () => ["day", "hour", "minute", "second"] }, // simple 是否精简：为00时自动隐藏 mode: { type: String, default: "default" }, // 还有多少天 day: { type: Number, default: 0 }, // 还有多少小时 hour: { type: Number, default: 0 }, // 还有多少分钟 minute: { type: Number, default: 0 }, // 还有多少秒 second: { type: Number, default: 0 }, // 结束时间 datetime: [Date, String], // 是否带有毫秒 isMillisecond: Boolean, // 自定义样式 customStyle: Object, // 数字样式 numberStyle: Object, // 分隔符样式 splitorStyle: Object }, data() { return { timer: null, millisecondTimer: null, syncFlag: false, seconds: 0, list: [], millisecond: 9, status: false }; }, watch: { day() { this.changeFlag(); }, hour() { this.changeFlag(); }, minute() { this.changeFlag(); }, second() { this.changeFlag(); }, datetime() { this.changeFlag(); } }, beforeDestroy() { this.clear(); }, created() { this.start(); }, methods: { // 转成秒 toSeconds({ day = 0, hour = 0, minute = 0, second = 0, datetime }) { if (datetime) { return ( (new Date(datetime.replace(/-/g, "/")).getTime() - new Date().getTime()) / 1000 ); } else { return day * 60 * 60 * 24 + hour * 60 * 60 + minute * 60 + second; } }, // 开始倒计时 start(options) { let { day, hour, minute, second, datetime } = options || {}; if (!day) { day = this.day; } if (!hour) { hour = this.hour; } if (!minute) { minute = this.minute; } if (!second) { second = this.second; } if (!datetime) { datetime = this.datetime; } this.seconds = this.toSeconds({ day, hour, minute, second, datetime }); this.next(); }, // 继续倒计时 next() { if (this.seconds <= 0) { return; } if (this.status) { return; } this.status = true; // Start coundown const next = () => { this.countDown(); if (this.seconds <= 0) { this.done(); return; } else { this.seconds--; this.timer = setTimeout(next, 1000); } }; // Use setTimeout instead setInterval next(); // milli second if (this.isMillisecond) { const next = () => { this.millisecond--; if (this.millisecond < 0) { this.millisecond = 9; } this.millisecondTimer = setTimeout(next, 100); }; next(); } }, // 停止 stop() { this.clear(); this.$emit("stop"); }, // 结束 done() { this.clear(); this.$emit("done"); }, // 清除定时器 clear() { clearTimeout(this.timer); clearTimeout(this.millisecondTimer); this.timer = null; this.millisecondTimer = null; this.status = false; }, // 倒计时执行 countDown() { let seconds = this.seconds; let [day, hour, minute, second] = [0, 0, 0, 0]; day = Math.floor(seconds / (60 * 60 * 24)); hour = Math.floor(seconds / (60 * 60)) - day * 24; minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60; second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60; if (day < 10) { day = "0" + day; } if (hour < 10) { hour = "0" + hour; } if (minute < 10) { minute = "0" + minute; } if (second < 10) { second = "0" + second; } const obj = { day, hour, minute, second }; let flag = day === "00"; this.list = this.layout.map((e, i) => { let item = { value: obj[e], splitor: this.splitorText(i), visible: this.mode === "simple" ? (flag ? obj[e] !== "00" : true) : true }; if (flag) { flag = obj[e] === "00"; } return item; }); this.$emit( "change", this.list.map(e => e.value) ); }, // 分隔符内容 splitorText(i) { let arr = []; if (isArray(this.splitor)) { arr = this.splitor; } else { switch (this.splitor) { case "cn": arr = ["天", "时", "分", "秒"]; break; case "en": arr = ["Day", "Hour", "Minute", "Second"]; break; case "": case false: case null: arr = ["", "", "", ""]; break; case "default": default: arr = ["天", ":", ":", ""]; break; } } return arr[i]; }, changeFlag() { this.$nextTick(() => { this.start(); }); } } }; </script> <style lang="scss" scoped> .cl-countdown { display: inline-flex; &__number { display: inline-block; height: 14px; font-size:14px; line-height: 14px; text-align: center; border-radius: 6px; } &__splitor { font-size:14px; } &-item { display: flex; align-items: center; &:first-child { .cl-countdown__number { margin-left: 0; } } } } </style> 2. 组件使用<countdown :second="3600" splitor="cn"></countdown>3. 本代码说明代码使用来自cool官方组件修改，查看官方组件文档di'zhi cool官方文档 -
JS身份证校验代码实现 开发中我们经常需要校验数据信息，其中包含身份证与手机号等，校验数据合法性我们需要使用正则的方法进行校验文章目录索引身份证校验1. 简单校验校验15位纯数字或18位字符或以X结尾身份证，缺点该方法校验不完整//数据匹配合法返回true function checkIdNo(num){ if (!(/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(num))) { return false; } return true }方法调用checkIdNo('4521266');//false checkIdNo('530124197312202026');//true2. 完整校验校验区域前缀及出身年月及性别等//数据匹配合法返回true const validateIdent = { aIdentityCode_City: { // 城市代码列表 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " }, IdentityCode_isCardNo(card) {//检查号码是否符合规范，包括长度，类型 var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X if (reg.test(card) === false) { return false; } return true; }, IdentityCode_checkProvince(card) { //取身份证前两位，校验省份 var province = card.substr(0, 2); if (validateIdent.aIdentityCode_City[province] == undefined) { return false; } return true; }, IdentityCode_checkBirthday(card) { //检查生日是否正确，15位以'19'年份来进行补齐。 var len = card.length; //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字 if (len == '15') { var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/; var arr_data = card.match(re_fifteen); // 正则取号码内所含出年月日数据 var year = arr_data[2]; var month = arr_data[3]; var day = arr_data[4]; var birthday = new Date('19' + year + '/' + month + '/' + day); return validateIdent.IdentityCode_verifyBirthday('19' + year, month, day, birthday); } //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X if (len == '18') { var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/; var arr_data = card.match(re_eighteen); // 正则取号码内所含出年月日数据 var year = arr_data[2]; var month = arr_data[3]; var day = arr_data[4]; var birthday = new Date(year + '/' + month + '/' + day); return validateIdent.IdentityCode_verifyBirthday(year, month, day, birthday); } return false; }, IdentityCode_verifyBirthday(year, month, day, birthday) {//校验日期 ，15位以'19'年份来进行补齐。 var now = new Date(); var now_year = now.getFullYear(); //年月日是否合理 if (birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day) { //判断年份的范围（3岁到150岁之间) var time = now_year - year; if (time >= 3 && time <= 150) { return true; } return false; } return false; }, IdentityCode_checkParity(card) { //校验位的检测 card = validateIdent.IdentityCode_changeFivteenToEighteen(card); // 15位转18位 var len = card.length; if (len == '18') { var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); var cardTemp = 0, i, valnum; for (i = 0; i < 17; i++) { cardTemp += card.substr(i, 1) * arrInt[i]; } valnum = arrCh[cardTemp % 11]; if (valnum == card.substr(17, 1)) { return true; } return false; } return false; }, IdentityCode_changeFivteenToEighteen(card) { //15位转18位身份证号 if (card.length == '15') { var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); var cardTemp = 0, i; card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6); for (i = 0; i < 17; i++) { cardTemp += card.substr(i, 1) * arrInt[i]; } card += arrCh[cardTemp % 11]; return card; } return card; }, } function IdentityCodeValid(card) {// 身份证号码检验主入口 let pass = true; let sex = '' //是否为空 if (pass && card === '') pass = false; //校验长度，类型 if (pass && validateIdent.IdentityCode_isCardNo(card) === false) pass = false; //检查省份 if (pass && validateIdent.IdentityCode_checkProvince(card) === false) pass = false; //校验生日 if (pass && validateIdent.IdentityCode_checkBirthday(card) === false) pass = false; //检验位的检测 if (pass && validateIdent.IdentityCode_checkParity(card) === false) pass = false; if (pass) { var iCard = validateIdent.IdentityCode_changeFivteenToEighteen(card); if (parseInt(iCard.charAt(16)) % 2 == 0) { sex = "0"; // 女生 } else { sex = "1"; // 男生 } return true } else { return false } } 方法调用IdentityCodeValid('4521266');//false IdentityCodeValid('530124197312202026');//true3. 联网校验或人工校验则需要调用第三方api接口，一般需要付费使用，费用较高，可校验名字与身份证是否匹配并返回用户的基础信息。一般项目中，正常情况下情况下选择代码校验即可，推荐使用方法2：完整校验
