由于想要直播又不想露脸，所以想在抖音，快手尝试一下娱乐赛道，我看很多给别人测名字，手机号测评的。收益看着还不错，但是网上搜的程序都是电脑程序，电脑程序又需要电脑开播，电脑开播又需要电脑版本的抖音伴侣，电脑版本的直播伴侣又需要1000粉丝，无解了…

所以想着自己是程序员，在手机上开发一个html+js应用，然后封装为一个app 然后手机开直播就可以了，下面是照着别人的样子开发了一个手机版的直播程序 【手机尾号测评】下面是相关代码和效果截图。

html部分

<template>
  <div class="score-page">
    <!-- 修改为单击事件 -->
    <div 
      class="settings-trigger" 
      @click="handleSettingsTrigger"
    ></div>
    

    <!-- 改为简单的留白区域 -->
    <div class="top-space"></div>

    <!-- 功能区 -->
    <div class="content-area">
      <!-- 输入区域 -->
      <div class="input-section">
        <van-field
          v-model="phoneNumber"
          placeholder="请输入手机号后四位"
          maxlength="4"
          type="number"
          :border="false"
          @keyup.enter="generateScore"
        >
          <template #button>
            <van-button 
              type="primary" 
              size="small"
              :disabled="!phoneNumber"
              @click="generateScore"
            >
              测算
            </van-button>
          </template>
        </van-field>
      </div>

      <!-- 滚动标题 -->
      <div class="scroll-title">
        <transition name="fade" mode="out-in">
          <div :key="currentTitleIndex" class="scroll-text">
         
          </div>
        </transition>
      </div>

      <!-- 历史记录区域 -->
      <div class="history-section">
        <transition-group name="list" appear>
          <div class="result-card"
               v-for="(item, index) in history"
               :key="item.number"
               :class=""
               :data-score="getScoreLevel(item.score)">
            <!-- 左侧手机号区域 -->
            <div class="left-section">
              <div class="number-display">
                <span v-for="(digit, index) in item.number" 
                      :key="index" 
                      class="number-digit">
                  {{ digit }}
                </span>
              </div>
            </div>
            
            <!-- 右侧分数和描述 -->
            <div class="right-section">
              <div class="score-row">
                <div class="score-display"
                     :style="{ background: item.theme.color }">
                  <span class="score-icon">{{ item.theme.icon }}</span>
                  <span class="score-text">{{ item.score }}分</span>
                </div>
                <div class="value-display">
                  <span class="value">预估价值：￥{{ item.value }}</span>
                </div>
              </div>
              <div class="description-box">
                {{ item.description }}
              </div>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

css部分

score-page {
  min-height: 100vh;
  background: #1a1a1a;
  padding-bottom: env(safe-area-inset-bottom);
}

.top-space {
  height: 20vh;
  background: transparent;
}

.content-area {
  padding: 16px;
}

.input-section,
.history-item {
  background: #242424;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.scroll-title {
  text-align: center;
  padding: 16px 12px;
}

.scroll-text {
  font-size: 16px;
  color: #FF3CAC;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.history-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.super-score::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: 12px;
  background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(255, 60, 172, 0.8));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderPulse 2s ease-in-out infinite;
}

.super-score::after {
  content: '✨ 极品号码 ✨';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #FFD700, #FF3CAC);
  color: #fff;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

@keyframes borderPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

@media (max-width: 480px) {
  .description-box,
  .value { font-size: 13px; }
  
  .super-score::after {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* 输入区域样式 */
.input-section {
  background: #242424;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

:deep(.van-field) {
  background: transparent;
}

:deep(.van-field__control) {
  color: #fff;
}

:deep(.van-button--primary) {
  background: linear-gradient(45deg, #FF3CAC, #784BA0);
  border: none;
}

js部分

// 输入的手机号后四位
const phoneNumber = ref('')
// 历史记录
const history = ref([])

// 滚动标题数组
const scrollTitles = [
  '快来看看你的手机号寓意',
  '手机号也能测运势',
  '一键解读手机号的秘密',
  '解锁手机号背后的好运',
  '测一测手机号的运势',
  '手机号也能带来好运气'
]

// 当前显示的标题索引
const currentTitleIndex = ref(0)

// 切换标题
const switchTitle = () => {
  currentTitleIndex.value = (currentTitleIndex.value + 1) % scrollTitles.length
}

// 启动标题轮播
setInterval(switchTitle, 3000)

// 检查是否为顺子
const isSequential = (nums) => {
  for (let i = 1; i < nums.length; i++) {
    if (nums[i] - nums[i-1] !== 1) return false
  }
  return true
}

// 检查是否为倒顺子
const isReverseSequential = (nums) => {
  for (let i = 1; i < nums.length; i++) {
    if (nums[i-1] - nums[i] !== 1) return false
  }
  return true
}

// 检查重复数字
const getRepeats = (nums) => {
  const counts = {}
  nums.forEach(num => {
    counts[num] = (counts[num] || 0) + 1
  })
  return Object.values(counts).sort((a, b) => b - a)[0] || 1
}

// 修改分数计算逻辑
const calculateBaseScore = (number) => {
  const nums = number.split('').map(Number)
  
  // 特殊号码直接返回高分
  const specialNumbers = {
    '6666': { min: 95, max: 99 },
    '8888': { min: 95, max: 99 },
    '9999': { min: 95, max: 99 },
    '1314': { min: 92, max: 94 },
    '520': { min: 92, max: 94 },
    '1688': { min: 92, max: 94 },
    '8888': { min: 95, max: 99 },
    '6789': { min: 90, max: 93 }, // 顺子
    '9876': { min: 90, max: 93 }, // 倒顺子
    '1111': { min: 92, max: 94 }, // 任意四连号
    '2222': { min: 92, max: 94 },
    '3333': { min: 92, max: 94 },
    '5555': { min: 92, max: 94 },
    '7777': { min: 92, max: 94 }
  }
  
  if (specialNumbers[number]) {
    const { min, max } = specialNumbers[number]
    return Math.floor(Math.random() * (max - min + 1) + min)
  }

  // 基础分数区间
  let scoreRange = {min: 75, max: 79} // 默认区间

  // 检查是否为顺子或倒顺子
  if (isSequential(nums) || isReverseSequential(nums)) {
    scoreRange = {min: 88, max: 92} // 提高顺子分数
  }

  // 检查重复数字
  const maxRepeats = getRepeats(nums)
  if (maxRepeats === 4) { // 连号
    scoreRange = {min: 90, max: 94}
  } else if (maxRepeats === 3) { // 三连号
    scoreRange = {min: 87, max: 91}
  } else if (maxRepeats === 2) { // 对子
    const pairs = getPairsCount(nums)
    if (pairs === 2) { // 双对
      scoreRange = {min: 85, max: 89}
    } else { // 单对
      scoreRange = {min: 80, max: 84}
    }
  }

  // 检查数字组合的特殊性
  if (hasAuspiciousNumbers(nums)) {
    scoreRange.min += 2
    scoreRange.max += 2
  }

  // 包含4则降低分数区间
  if (number.includes('4')) {
    scoreRange.min = Math.max(60, scoreRange.min - 8)
    scoreRange.max = Math.max(65, scoreRange.max - 8)
  }

  // 在区间内取随机值
  const baseScore = Math.floor(Math.random() * (scoreRange.max - scoreRange.min + 1) + scoreRange.min)
  
  // 添加小幅度随机波动
  const fluctuation = Math.floor(Math.random() * 3) - 1 // -1, 0, or 1
  return Math.min(99, Math.max(60, baseScore + fluctuation))
}

// 获取对子数量
const getPairsCount = (nums) => {
  const counts = {}
  nums.forEach(num => {
    counts[num] = (counts[num] || 0) + 1
  })
  return Object.values(counts).filter(count => count === 2).length
}

// 检查是否包含吉利数字
const hasAuspiciousNumbers = (nums) => {
  const auspiciousNumbers = [6, 8, 9] // 吉利数字
  return nums.some(num => auspiciousNumbers.includes(num))
}

代码自取 gitee主页 https://gitee.com/jimisun123/entertainment-live-assistant