首页
友情链接
精美壁纸
给我留言
更多
关于我
Search
1
uniapp Click点击事件冲突解决
4,008 阅读
2
【插件】UNI APP 实现商米打印机功能支持T1,T2,V2机型
2,748 阅读
3
Java Validation参数校验注解使用
1,096 阅读
4
windows10下docker:给已存在的容器添加端口映射的方法
914 阅读
5
python第三方库代码提示_解决pycharm不能自动补全第三方库的函数和属性问题
871 阅读
Java
Spring Boot
Spring Mvc
Java基础
进阶知识
前端
uniapp
小程序/公众号
JavaScript
HTML/CSS
Vue
Android
React
PHP
开源软件
商城
营销工具
开发工具
视频/教程
Discuz主题/插件
typecho主题/插件
SEO杂谈
数据库
MongoDB
MySQL
Redis
单片机
概念说明
电路相关
Python
devops
docker
k8s
linux
登录
/
注册
Search
标签搜索
python
mysql
人人商城
php
java
docker
typecho
插件
微擎
seo
spring boot
discuz
队列
uni-app
phpcms
教程视频
开源系统
源码
工具
css
哈根达斯
累计撰写
90
篇文章
累计收到
118
条评论
首页
栏目
Java
Spring Boot
Spring Mvc
Java基础
进阶知识
前端
uniapp
小程序/公众号
JavaScript
HTML/CSS
Vue
Android
React
PHP
开源软件
商城
营销工具
开发工具
视频/教程
Discuz主题/插件
typecho主题/插件
SEO杂谈
数据库
MongoDB
MySQL
Redis
单片机
概念说明
电路相关
Python
devops
docker
k8s
linux
页面
友情链接
精美壁纸
给我留言
关于我
搜索到
2
篇与
JavaScript
的结果
2021-11-08
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官方文档
2021年11月08日
203 阅读
0 评论
0 点赞
2021-07-13
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:完整校验
2021年07月13日
89 阅读
0 评论
0 点赞