原文链接 欢迎大家对于本站的访问 - AsterCasc 前言 感觉几个在线生成IdCard的网站，没有满足自己需求的，比较简单咱们就直接写到网站里面。
有需求的小伙伴可以直接访问 AsterCasc - 在线IdCard生成 实现 在线IdCard生成其实最麻烦的是需要存所有行政区划，然后取随机。
但是我们这里没必要，因为这种东西其实意义不是特别大，只给几个主要城市的单选，如果有需求让用户直接手填即可：
unchecked-icon="panorama_fish_eye" val="110101" label="北京"/>
unchecked-icon="panorama_fish_eye" val="310101" label="上海"/>
unchecked-icon="panorama_fish_eye" val="440303" label="深圳"/>
unchecked-icon="panorama_fish_eye" val="440103" label="广州"/>
unchecked-icon="panorama_fish_eye" val="330102" label="杭州"/>
unchecked-icon="panorama_fish_eye" val="320102" label="南京"/>
unchecked-icon="panorama_fish_eye" val="" label="自定义"/>
style="opacity: 0.75" mask="######" placeholder="行政区划代码"
:input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',
padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd',
margin: '0.75rem 0.5rem 0.5rem 1rem'} ">
hide-bottom-space borderless style="opacity: 0.75" placeholder="行政区划代码"
:input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',
padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd', border:'dashed 2px #aaa',
margin: '0.75rem 0.5rem 0.5rem 1rem'} ">
let cityCode = ref("330102")
let customCityCode = ref("")
//...
let inputCityCode = customCityCode.value
if (cityCode.value !== '') {
inputCityCode = cityCode.value
}
出生年月我们这里允许取随机和指定年月日，如果随机那么年份在
1950
到
2000
之间随机，月份在
1
到
12
月随机，日期在
1
到
28
之间随机。
那么这里的问题就是比如
12/31
这种日期就选不到了，但是由于本身也是随机生成，也没有太大所谓，如果小伙伴需要对于这种随机日期也能取到，那么可以使用时间戳随机数来实现该随机功能：
unchecked-icon="panorama_fish_eye" val="random" label="随机"/>
unchecked-icon="panorama_fish_eye" val="" label="自定义"/>
style="opacity: 0.75"
:input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',
padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd',
margin: '0.75rem 0.5rem 0.5rem 1rem'} ">
hide-bottom-space borderless style="opacity: 0.75"
:input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',
padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd', border:'dashed 2px #aaa',
margin: '0.75rem 0.5rem 0.5rem 1rem'} ">
let yearNum = 1950
let monthNum = 1
let dayNum = 1
if (birth.value === 'random') {
yearNum = yearNum + Math.floor(Math.random() * (70));
monthNum = monthNum + Math.floor(Math.random() * (12));
dayNum = dayNum + Math.floor(Math.random() * (28));
} else {
const regex = /^\d{4}-\d{2}-\d{2}$/;
if (!regex.test(customBirth.value)) {
notifyTopNegative("输入日期格式错误", 1000, notify)
return ""
}
const inputDate = new Date(customBirth.value)
if (isNaN(inputDate.getTime())) {
notifyTopNegative("输入日期格式错误", 1000, notify)
return ""
}
const [year, month, day] = customBirth.value.split("-").map(Number);
yearNum = year
monthNum = month
dayNum = day
if (inputDate.getFullYear() !== year || inputDate.getMonth() + 1 !== month || inputDate.getDate() !== day) {
notifyTopNegative("输入日期格式错误", 1000, notify)
return ""
}
}
const year = yearNum
const month = monthNum.toString().padStart(2, '0')
const day = dayNum.toString().padStart(2, '0')
允许用户指定性别，通过控制倒数第二位的奇偶来决定：
unchecked-icon="panorama_fish_eye" val="random" label="随机"/>
unchecked-icon="panorama_fish_eye" val="0" label="女"/>
unchecked-icon="panorama_fish_eye" val="1" label="男"/>
let randomSerial;
if (gender.value === '1') {
randomSerial = Math.floor(Math.random() * 100).toString().padStart(2, '0')
+ (Math.floor(Math.random() * 5) * 2 + 1);
} else if (gender.value === '0') {
randomSerial = Math.floor(Math.random() * 100).toString().padStart(2, '0')
+ Math.floor(Math.random() * 5) * 2;
} else (gender.value === 'random') {
randomSerial = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
}
最后计算校验位：
const id17 = `${inputCityCode}${year}${month}${day}${randomSerial}`;
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
const checkDigits = "10X98765432";
let sum = 0;
for (let i = 0; i < id17.length; i++) {
sum += parseInt(id17[i]) * weights[i];
}
const checkIndex = sum % 11;
const checkDigit = checkDigits[checkIndex];
const ret = id17 + checkDigit
源代码 Yuno Web 原文链接 欢迎大家对于本站的访问 - AsterCasc