<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>生命数字</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.7/theme-chalk/index.css">
<style>
.number-cell {
font-size: 1em;
width: 1em;
text-align: center
}
.el-message-box {
width: 90% !important;
max-width: 420px
}
body {
margin: 0 15px;
}
* {
font-family: -apple-system-font, Helvetica Neue, sans-serif;
font-weight: bold;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none
}
</style>
</head>
<body>
<div id="app"
style="display: none; flex-direction: column; min-height: 70vh; justify-content: center; max-width: 512px; margin: 0 auto;">
<h1 style="align-self: center; cursor: pointer;" @click="location.reload()">生命数字</h1>
<div style="display: flex;">
<el-input @input="inputing" v-model="birthday" placeholder="生日yyyymmdd" type="number" style="margin-right: 10px;">
</el-input>
<el-input @input="inputing" v-model="name" placeholder="姓名拼音" style="margin-right: 10px;"></el-input>
<el-button @click="generate" type="primary">生成</el-button>
</div>
<div v-if="y1 || false" id="smsz-1"
style="border-radius: 4px; display: flex; flex-direction: column; align-items: center; border: 1px solid #DCDFE6; width: fit-content; margin: 20px auto 0 auto; padding: 10px;">
<svg width="303" height="232" xmlns="http://www.w3.org/2000/svg">
<g id="Layer_1">
<title>Layer 1</title>
<line fill="none" stroke="#000" x1="636" y1="473" x2="636" y2="472" id="svg_4" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="150" y1="66.5" x2="61" y2="231.5" id="svg_1" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="150" y1="66.5" x2="239" y2="231.5" id="svg_2" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="61" y1="230.5" x2="239" y2="230.5" id="svg_3" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="113" y1="136.5" x2="187" y2="136.5" id="svg_5" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" x1="85.99999" y1="184.5" x2="213.99999" y2="184.5" id="svg_7" stroke-linejoin="undefined"
stroke-linecap="undefined" stroke="#000" />
<line fill="none" stroke="#000" x1="151" y1="137.5" x2="150" y2="230.5" id="svg_9" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="83" y1="66.5" x2="216" y2="66.5" id="svg_11" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" x1="129.5" y1="26.5" x2="170.5" y2="26.5" id="svg_12" stroke-linejoin="undefined"
stroke-linecap="undefined" stroke="#000" />
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
stroke-width="0" id="svg_6" y="214.5" x="95" stroke="#000" fill="#000000">{{a1}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
stroke-width="0" id="svg_8" y="214.5" x="122" stroke="#000" fill="#000000">{{a2}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
stroke-width="0" id="svg_10" y="167.5" x="122" stroke="#000" fill="#000000">{{a5}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
stroke-width="0" id="svg_13" y="214.5" x="169" stroke="#000" fill="#000000">{{a3}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
stroke-width="0" id="svg_14" y="214.5" x="197" stroke="#000" fill="#000000">{{a4}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
stroke-width="0" id="svg_15" y="167.5" x="169" stroke="#000" fill="#000000">{{a6}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_16" y="115.5" x="145" stroke-width="0" stroke="#000" fill="#000000">{{a7}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_17" y="54.5" x="106" stroke-width="0" stroke="#000" fill="#000000">{{a8}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_18" y="54.5" x="185" stroke-width="0" stroke="#000" fill="#000000">{{a9}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_19" y="14.5" x="145" stroke-width="0" stroke="#000" fill="#000000">{{a10}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_20" y="154.5" x="56" stroke-width="0" stroke="#000" fill="#000000">{{a11}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_21" y="154.5" x="29" stroke-width="0" stroke="#000" fill="#000000">{{a12}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_22" y="154.5" x="0" stroke-width="0" stroke="#000" fill="#000000">{{a13}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_23" y="154.5" x="231" stroke-width="0" stroke="#000" fill="#000000">{{a14}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_24" y="154.5" x="261" stroke-width="0" stroke="#000" fill="#000000">{{a15}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em"
id="svg_25" y="154.5" x="293" stroke-width="0" stroke="#000" fill="#000000">{{a16}}</text>
</g>
</svg>
<div style="display: flex; width: 100%; margin-top: 20px; justify-content: space-around;">
<div style="display: flex; flex-direction: column;">
<div>{{a1}}{{a2}}{{a5}}</div>
<div>{{a2}}{{a5}}{{a11}}</div>
<div>{{a1}}{{a5}}{{a12}}</div>
<div>{{a11}}{{a12}}{{a13}}</div>
</div>
<div style="display: flex; flex-direction: column;">
<div>{{a5}}{{a6}}{{a7}}</div>
<div>{{a5}}{{a7}}{{a9}}</div>
<div>{{a6}}{{a7}}{{a8}}</div>
<div>{{a8}}{{a9}}{{a10}}</div>
</div>
<div style="display: flex; flex-direction: column;">
<div>{{a3}}{{a4}}{{a6}}</div>
<div>{{a3}}{{a6}}{{a14}}</div>
<div>{{a4}}{{a6}}{{a15}}</div>
<div>{{a14}}{{a15}}{{a16}}</div>
</div>
</div>
</div>
<div v-if="nameInputed || false" style="display: flex; width: fit-content; margin: 20px auto 0 auto;">
<div id="name-1"
style="border-radius: 4px; display: flex; flex-direction: column; align-items: left; border: 1px solid #DCDFE6; padding: 10px; margin-right: 20px;">
<div>使命数：{{shiming}}</div>
<div>内驱数：{{neiqu}}</div>
<div>人际数：{{renji}}</div>
<div>成熟数：{{chengshu}}</div>
</div>
<div id="name-2"
style="border-radius: 4px; display: flex; flex-direction: column; align-items: left; border: 1px solid #DCDFE6; padding: 10px;">
<div>头脑：{{tounao}}</div>
<div>情绪：{{qingxu}}</div>
<div>身体：{{shenti}}</div>
<div>直觉：{{zhijue}}</div>
</div>
</div>
<div v-if="y1 || false "
style="border-radius: 4px; display: flex; align-items: center; border: 1px solid #DCDFE6; width: fit-content; margin: 20px auto 0 auto; padding: 10px;">
<div style="display: flex; flex-direction: column; align-items: center; margin-right: 0.5em;">
<svg width="192" height="313" xmlns="http://www.w3.org/2000/svg">
<g id="Layer_1">
<title>Layer 1</title>
<g id="svg_32">
<rect fill="none" stroke="#000" x="0" y="138" width="192" height="41" id="svg_1" />
<line fill="none" x1="34" y1="137" x2="96" y2="46" id="svg_2" stroke-linejoin="undefined"
stroke-linecap="undefined" stroke="#000" />
<line fill="none" stroke="#000" x1="161" y1="138" x2="96" y2="46" id="svg_3" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<path fill="none" stroke-linejoin="undefined" stroke-linecap="undefined" opacity="undefined"
d="m63,95l68,0" id="svg_4" stroke="#000" />
<line fill="none" stroke="#000" x1="96" y1="138" x2="129" y2="94" id="svg_5" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="66" y1="95" x2="96" y2="137" id="svg_6" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" x1="65" y1="46" x2="125" y2="46" id="svg_7" stroke="#000" />
<line fill="none" stroke="#000" x1="66" y1="46" x2="96" y2="0" id="svg_8" />
<line fill="none" stroke="#000" x1="126" y1="46" x2="96" y2="1" id="svg_9" />
<path fill="none" opacity="undefined" d="m34,179l62,91" id="svg_10" stroke="#000" />
<line fill="none" stroke="#000" x1="159" y1="179" x2="96" y2="271" id="svg_11" />
<line fill="none" x1="66" y1="224" x2="128" y2="224" id="svg_12" stroke="#000" />
<line fill="none" stroke="#000" x1="97" y1="179" x2="65" y2="224" id="svg_13" />
<line fill="none" stroke="#000" x1="130" y1="224" x2="97" y2="178" id="svg_14" />
<line stroke="#000" fill="none" x1="66" y1="272" x2="126" y2="272" id="svg_15" />
<line fill="none" stroke="#000" x1="125" y1="273" x2="96" y2="312" id="svg_16" />
<line fill="none" stroke="#000" x1="66" y1="272" x2="96" y2="313" id="svg_17" />
<line fill="none" stroke="#000" x1="65" y1="138" x2="65" y2="179" id="svg_18" stroke-linejoin="undefined"
stroke-linecap="undefined" />
<line fill="none" stroke="#000" x1="127" y1="138" x2="127" y2="179" id="svg_19"
stroke-linejoin="undefined" stroke-linecap="undefined" />
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" id="svg_20" y="165" x="28" stroke-width="0" stroke="#000" fill="#000000">{{b1}}</text>
<text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="1em" stroke-width="0"
id="svg_21" y="165" x="92" stroke="#000" fill="#000000">{{b2}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" stroke-width="0" id="svg_23" y="165" x="154" stroke="#000" fill="#000000">{{b3}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" stroke-width="0" id="svg_24" y="203" x="59" stroke="#000" fill="#000000">{{b8}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" stroke-width="0" id="svg_25" y="203" x="124" stroke="#000" fill="#000000">{{b9}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" id="svg_26" y="249" x="91" stroke-width="0" stroke="#000" fill="#000000">{{b10}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" id="svg_27" y="294" x="91" stroke-width="0" stroke="#000" fill="#000000">{{b11}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" stroke-width="0" id="svg_28" y="127" x="59" stroke="#000" fill="#000000">{{b4}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" stroke-width="0" id="svg_29" y="128" x="123" stroke="#000" fill="#000000">{{b5}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" stroke-width="0" id="svg_30" y="83" x="91" stroke="#000" fill="#000000">{{b6}}</text>
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP"
font-size="1em" id="svg_31" y="34" x="91" stroke-width="0" stroke="#000" fill="#000000">{{b7}}</text>
</g>
</g>
</svg>
</div>
<div style="display: flex; flex-direction: column; margin-left: 0.5em;">
{{this.smsz2Right}}
</div>
</div>
<div v-if="y1" id="liunian" :style="`
display: grid; grid-auto-flow: column; width: ${Math.ceil(liunian.length/10)*70}px;
border-radius: 4px; border: 1px solid #DCDFE6; margin: 20px auto 0 auto; padding: 10px;
grid-template-columns: repeat(auto-fill, 70px);
grid-template-rows: repeat(9, 1em);
`">
<div v-for="(item, index) in liunian" :key="index"
:style="`color: ${((year18+index)===yearNow?'red':'')}; text-align: center`">
{{item.year}}/{{item.num}}
</div>
</div>
<el-collapse style="margin-top: 20px;">
<el-collapse-item title="广告，点开查看">
<img style="width: 100%; border-radius: 4px;"
src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c2fdd86e-36c1-43f7-a906-f89bb382e713/82eb8b91-5a2b-4314-9c66-ed2dd4262d7d.jpg">
</el-collapse-item>
</el-collapse>
</div>
<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.7/index.min.js"></script>
<script>
const letter2num = {
A: '1', B: '2', C: '3', D: '4', E: '5', F: '6', G: '7', H: '8', I: '9',
J: '1', K: '2', L: '3', M: '4', N: '5', O: '6', P: '7', Q: '8', R: '9',
S: '1', T: '2', U: '3', V: '4', W: '5', X: '6', Y: '7', Z: '8'
}
const vm = new Vue({
el: '#app',
data() {
return {
y1: '', y2: '', y3: '', y4: '', m1: 'm1', m2: 'm2', d1: 'd1', d2: 'd2',
a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4', a5: 'a5', a6: 'a6', a7: 'a7', a8: 'a8',
a9: 'a9', a10: 'a10', a11: 'a11', a12: 'a12', a13: 'a13', a14: 'a14', a15: 'a15', a16: 'a16',
birthday: '', name: '', nameInputed: false,
b1: 'b1', b2: 'b2', b3: 'b3', b4: 'b4', b5: 'b5', b6: 'b6', b7: 'b7',
b8: 'b8', b9: 'b9', b10: 'b10', b11: 'b11', b12: 'b12', b13: 'b13', b14: 'b14',
smsz2Right: '',
tounao: 0, qingxu: 0, shenti: 0, zhijue: 0,
shiming: '', neiqu: '', renji: '', chengshu: '',
yearNow: new Date().getFullYear(), year18: 0, liunian: []
}
},
methods: {
inputing() {
this.y1 = ''
this.nameInputed = false
},
generate() {
const birthday = this.birthday.trim()
const intVal = parseInt(birthday)
if (isNaN(intVal) || intVal < 10000101 || intVal > 99991231) {
this.$alert('生日范围 10000101 ~ 99991231')
return
}
this.y1 = birthday[0]
this.y2 = birthday[1]
this.y3 = birthday[2]
this.y4 = birthday[3]
this.m1 = birthday[4]
this.m2 = birthday[5]
this.d1 = birthday[6]
this.d2 = birthday[7]
this.smsz1()
this.smsz2()
this.nameDeal() // must below this.smsz2()
this.liunian = []
this.year18 = Number(this.y1 + this.y2 + this.y3 + this.y4) + 18
for (let i = this.year18; i <= this.year18 + (53 - 18); i++) {
this.liunian.push({ age: i - this.year18 + 18, num: addAndAdd(i + this.m1 + this.m2 + this.d1 + this.d2), year: i })
}
},
smsz2() {
this.b1 = addAndAdd(this.m1 + this.m2)
this.b2 = addAndAdd(this.d1 + this.d2)
this.b3 = addAndAdd(this.y1 + this.y2 + this.y3 + this.y4)
this.b4 = addAndAdd(this.b1 + this.b2)
this.b5 = addAndAdd(this.b2 + this.b3)
this.b6 = addAndAdd(this.b4 + this.b5)
this.b7 = addAndAdd(this.b1 + this.b3)
this.b8 = Math.abs(Number(this.b1) - Number(this.b2)) + ''
this.b9 = Math.abs(Number(this.b2) - Number(this.b3)) + ''
this.b10 = Math.abs(Number(this.b8) - Number(this.b9)) + ''
this.b11 = Math.abs(Number(this.b1) - Number(this.b3)) + ''
this.b12 = addAndAdd(this.y1 + this.y2 + this.y3 + this.y4 + this.m1 + this.m2 + this.d1 + this.d2, 2)
this.smsz2Right = this.b12
this.b14 = this.b12 // 用于计算成熟数
if (this.b12.length > 1) {
this.b13 = addAndAdd(Number(this.b12[0]) + Number(this.b12[1]), 2)
this.smsz2Right += `/${this.b13}`
this.b14 = this.b13
}
if (this.b13.length > 1) {
this.b14 = addAndAdd(Number(this.b13[0]) + Number(this.b13[1]), 2)
this.smsz2Right += `/${this.b14}`
}
},
smsz1() {
this.a1 = addAndAdd(this.d1 + this.d2)
this.a2 = addAndAdd(this.m1 + this.m2)
this.a3 = addAndAdd(this.y1 + this.y2)
this.a4 = addAndAdd(this.y3 + this.y4)
this.a5 = addAndAdd(this.a1 + this.a2)
this.a6 = addAndAdd(this.a3 + this.a4)
this.a7 = addAndAdd(this.a5 + this.a6)
this.a8 = addAndAdd(this.a6 + this.a7)
this.a9 = addAndAdd(this.a5 + this.a7)
this.a10 = addAndAdd(this.a8 + this.a9)
this.a11 = addAndAdd(this.a2 + this.a5)
this.a12 = addAndAdd(this.a1 + this.a5)
this.a13 = addAndAdd(this.a11 + this.a12)
this.a14 = addAndAdd(this.a3 + this.a6)
this.a15 = addAndAdd(this.a4 + this.a6)
this.a16 = addAndAdd(this.a14 + this.a15)
},
nameDeal() {
const name = this.name.trim().toUpperCase()
let yuanfu = ''
let yuanyin = ''
let fuyin = ''
for (let i = 0; i < name.length; i++) {
const charCode = letter2num[name[i]]
if (!charCode) {
continue
}
yuanfu += charCode
if ('A' === name[i] || 'O' === name[i] || 'E' === name[i] || 'I' === name[i] || 'U' === name[i] || 'V' === name[i]) {
yuanyin += charCode
} else {
fuyin += charCode
}
}
this.nameInputed = yuanfu.length > 0
this.shiming = ''
this.neiqu = ''
this.renji = ''
this.chengshu = ''
let cache = ''
cache = addAndAdd(yuanfu, 2, 0, false, true)
this.shiming += cache
while (cache.length > 1) {
cache = addAndAdd(Number(cache[0]) + Number(cache[1]), 2, 0, false)
this.shiming += '/' + cache
}
const c = cache // c用于计算成熟数
cache = addAndAdd(yuanyin, 2, 0, false, true)
this.neiqu += cache
while (cache.length > 1) {
cache = addAndAdd(Number(cache[0]) + Number(cache[1]), 2, 0)
this.neiqu += '/' + cache
}
cache = addAndAdd(fuyin, 2, 0, false, true)
this.renji += cache
while (cache.length > 1) {
cache = addAndAdd(Number(cache[0]) + Number(cache[1]), 2, 0)
this.renji += '/' + cache
}
this.chengshu = addAndAdd(Number(this.b14) + Number(c))
this.tounao = 0
this.qingxu = 0
this.shenti = 0
this.zhijue = 0
for (let i = 0; i < yuanfu.length; i++) {
if ('1' === yuanfu[i] || '8' === yuanfu[i]) {
this.tounao++
} else if ('2' === yuanfu[i] || '3' === yuanfu[i] || '6' === yuanfu[i]) {
this.qingxu++
} else if ('4' === yuanfu[i] || '5' === yuanfu[i]) {
this.shenti++
} else if ('7' === yuanfu[i] || '9' === yuanfu[i]) {
this.zhijue++
}
}
}
},
mounted() {
document.getElementById('app').style.display = 'flex'
}
})
function addAndAdd(number, length = 1, zero = 5, log = false, sumFirst = false) { // length: number; zero: number, 5|0
number = Number(number)
if (log) {
console.log(number, length, zero)
}
if (isNaN(number)) {
return '0'
} else if (0 === number) {
return zero + ''
}
const string = number + ''
let sum = 0
for (let i = 0; i < string.length; i++) {
sum += Number(string[i])
}
if (string.length <= length) {
if (sumFirst) {
return sum + ''
}
return string
}
return addAndAdd(sum, length, zero, log)
}
</script>
</body>
</html>