IT俱乐部 JavaScript 如何用 Deepseek 写的uniapp血型遗传查询工具

如何用 Deepseek 写的uniapp血型遗传查询工具

发布: 2025年 5月 1日 92阅读

引言

在现代社会中，了解血型遗传规律对于优生优育、医疗健康等方面都有重要意义。本文将介绍如何使用Uniapp开发一个跨平台的血型遗传查询工具，帮助用户预测孩子可能的血型。

一、血型遗传基础知识

人类的ABO血型系统由三个等位基因决定：IA、IB和i。其中IA和IB对i是显性关系：

  • A型血基因型：IAIA或IAi
  • B型血基因型：IBIB或IBi
  • AB型血基因型：IAIB
  • O型血基因型：ii

根据孟德尔遗传定律，孩子的血型由父母双方各提供一个等位基因组合而成。

二、Uniapp开发优势

选择Uniapp开发这款工具主要基于以下优势：

  • 跨平台能力：一次开发，可发布到iOS、Android、H5及各种小程序平台
  • 开发效率高：基于Vue.js框架，学习成本低，开发速度快
  • 性能优良：接近原生应用的体验
  • 生态丰富：拥有完善的插件市场和社区支持

三、核心代码解析

1. 血型遗传算法实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getPossibleGenotypes(parent1, parent2) {
  // 血型对应的可能基因型
  const typeToGenotypes = {
    'A': ['AA', 'AO'],
    'B': ['BB', 'BO'],
    'AB': ['AB'],
    'O': ['OO']
  }
  const parent1Genotypes = typeToGenotypes[parent1]
  const parent2Genotypes = typeToGenotypes[parent2]
  const possibleGenotypes = []
  // 生成所有可能的基因组合
  for (const g1 of parent1Genotypes) {
    for (const g2 of parent2Genotypes) {
      // 每个父母贡献一个等位基因
      for (let i = 0; i

这段代码实现了血型遗传的核心算法，通过遍历父母可能的基因型组合，计算出孩子所有可能的基因型。

2. 概率计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
calculateProbabilities(genotypes) {
  const bloodTypeCounts = {
    'A': 0,
    'B': 0,
    'AB': 0,
    'O': 0
  }
  // 基因型到血型的映射
  const genotypeToType = {
    'AA': 'A',
    'AO': 'A',
    'BB': 'B',
    'BO': 'B',
    'AB': 'AB',
    'OO': 'O'
  }
  // 统计每种血型的出现次数
  for (const genotype of genotypes) {
    const type = genotypeToType[genotype]
    bloodTypeCounts[type]++
  }
  const total = genotypes.length
  const probabilities = {}
  // 计算概率
  for (const type in bloodTypeCounts) {
    const count = bloodTypeCounts[type]
    if (count > 0) {
      probabilities[type] = (count / total * 100).toFixed(1)
    }
  }
  return probabilities
}

这部分代码统计各种血型出现的频率，并计算出每种血型出现的概率百分比。

3. 界面交互实现

1
2
3
父亲血型:
      {{bloodTypes[parent1Index].name}}
    <button class="calculate-btn">计算孩子可能的血型</button>

使用Uniapp的picker组件实现血型选择，通过按钮触发计算逻辑，界面简洁友好。

四、项目亮点

  • 科学准确性：严格遵循遗传学原理，计算结果准确可靠
  • 用户体验优化：

    • 结果自动滚动到可视区域
    • 概率可视化展示
    • 遗传知识科普
  • 代码结构清晰：

    • 业务逻辑与UI分离
    • 复用性高的工具函数
    • 良好的代码注释

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
血型遗传查询工具选择父母血型父亲血型:
                        {{bloodTypes[parent1Index].name}}
                    母亲血型:
                        {{bloodTypes[parent2Index].name}}
                    <button class="calculate-btn">计算孩子可能的血型</button>
        结果父母血型: {{parent1Name}} + {{parent2Name}}孩子可能的血型:
                {{resultText}}{{probabilityText}}血型遗传规律说明:• 血型由ABO基因决定，A和B是显性基因，O是隐性基因。• A型血基因型可能是AA或AO，B型血基因型可能是BB或BO。• AB型血基因型是AB，O型血基因型是OO。
    export default {
        data() {
            return {
                bloodTypes: [{
                        name: 'A型',
                        value: 'A'
                    },
                    {
                        name: 'B型',
                        value: 'B'
                    },
                    {
                        name: 'AB型',
                        value: 'AB'
                    },
                    {
                        name: 'O型',
                        value: 'O'
                    }
                ],
                parent1Index: 0,
                parent2Index: 0,
                parent1Name: 'A型',
                parent2Name: 'A型',
                parent1Value: 'A',
                parent2Value: 'A',
                showResult: false,
                resultText: '',
                probabilityText: ''
            }
        },
        methods: {
            bindParent1Change(e) {
                this.parent1Index = e.detail.value
                this.parent1Name = this.bloodTypes[this.parent1Index].name
                this.parent1Value = this.bloodTypes[this.parent1Index].value
            },
            bindParent2Change(e) {
                this.parent2Index = e.detail.value
                this.parent2Name = this.bloodTypes[this.parent2Index].name
                this.parent2Value = this.bloodTypes[this.parent2Index].value
            },
            calculateBloodType() {
                // 计算可能的基因组合
                const possibleGenotypes = this.getPossibleGenotypes(this.parent1Value, this.parent2Value)
                // 计算可能的血型及其概率
                const bloodTypeProbabilities = this.calculateProbabilities(possibleGenotypes)
                // 生成结果文本
                let resultText = ''
                let probabilityText = '概率: '
                let first = true
                for (const type in bloodTypeProbabilities) {
                    if (!first) {
                        resultText += '、'
                        probabilityText += '，'
                    }
                    resultText += this.getBloodTypeName(type)
                    probabilityText += `${this.getBloodTypeName(type)} ${bloodTypeProbabilities[type]}%`
                    first = false
                }
                this.resultText = resultText
                this.probabilityText = probabilityText
                this.showResult = true
                // 滚动到结果位置
                uni.pageScrollTo({
                    scrollTop: 300,
                    duration: 300
                })
            },
            getBloodTypeName(type) {
                const names = {
                    'A': 'A型',
                    'B': 'B型',
                    'AB': 'AB型',
                    'O': 'O型'
                }
                return names[type]
            },
            getPossibleGenotypes(parent1, parent2) {
                // 血型对应的可能基因型
                const typeToGenotypes = {
                    'A': ['AA', 'AO'],
                    'B': ['BB', 'BO'],
                    'AB': ['AB'],
                    'O': ['OO']
                }
                const parent1Genotypes = typeToGenotypes[parent1]
                const parent2Genotypes = typeToGenotypes[parent2]
                const possibleGenotypes = []
                // 生成所有可能的基因组合
                for (const g1 of parent1Genotypes) {
                    for (const g2 of parent2Genotypes) {
                        // 每个父母贡献一个等位基因
                        for (let i = 0; i < 2; i++) {
                            for (let j = 0; j  0) {
                        probabilities[type] = (count / total * 100).toFixed(1)
                    }
                }
                return probabilities
            }
        }
    }
 
    .container {
        padding: 20rpx;
    }
    .header {
        margin: 30rpx 0;
        text-align: center;
    }
    .title {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
    }
    .card {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    }
    .subtitle {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
        display: block;
        color: #333;
    }
    .form-item {
        margin-bottom: 30rpx;
    }
    .label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
    }
    .picker {
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 20rpx;
        border: 1rpx solid #eee;
        border-radius: 8rpx;
        font-size: 28rpx;
    }
    .calculate-btn {
        background-color: #4CAF50;
        color: white;
        margin-top: 40rpx;
        border-radius: 8rpx;
        font-size: 30rpx;
        height: 90rpx;
        line-height: 90rpx;
    }
    .result-card {
        background-color: #e9f7ef;
    }
    .result-text {
        font-size: 28rpx;
        margin-bottom: 20rpx;
        display: block;
    }
    .blood-type {
        color: #e74c3c;
        font-weight: bold;
    }
    .probability {
        font-size: 26rpx;
        color: #666;
        display: block;
        margin-top: 10rpx;
    }
    .note-title {
        font-weight: bold;
        font-size: 28rpx;
        margin-bottom: 15rpx;
        display: block;
        color: #333;
    }
    .note-text {
        font-size: 26rpx;
        color: #666;
        display: block;
        margin-bottom: 10rpx;
        line-height: 1.6;
    }

到此这篇关于用 Deepseek 写的uniapp血型遗传查询工具的文章就介绍到这了,更多相关Deepseek uniapp血型遗传内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/15105.html
55赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部