axios+Vant+vue+jq重构jq月经周期计算器源代码（兼容移动端）

本文链接：https://blog.csdn.net/weixin_43392489/article/details/114837050

本文由歌谣分享，介绍如何使用axios、Vant、Vue和jq重构一款流行的jq月经周期计算器，适合移动端。文章展示重构后的实际效果，并提供了核心代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是歌谣代码重构不易公众号关注小歌谣

前言

网络上流行了一款jq生成月经计算器的代码
是这样的
在这里插入图片描述
实现效果如图所示
本次讲解就是说明如何用Vant+jq+Vue实现此代码的重构
先看一眼重构演示的效果这个是可以直接进行接口调用的

在这里插入图片描述
首先我们看一眼目录结构

在这里插入图片描述
我们这边贴出我自己手写的代码的核心部分
index.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vant.js"></script>
    <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
    <script src="./js/axios.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <title>萌芽APP</title>
    <style>
        body {
            width: 100%;
        }

        .SetTime {
            width: 100%;
            height: 40px;
            background: #F6F7F9;
            opacity: 1;
        }

        span {
            margin-left: 12px;
            width: 286px;
            height: 37px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 30px;
            color: #333333;
            opacity: 1;
            line-height: 40px;
        }

        .SetDate {
            width: 100%;
            display: block;
        }

        input[type="date"] {
            box-sizing: border-box;
            text-align: center;
            font-size: 1.4em;
            height: 2.7em;
            border-radius: 4px;
            border: 1px solid #c8cccf;
            color: #6a6f77;
            -web-kit-appearance: none;
            -moz-appearance: none;
            display: block;
            outline: 0;
            padding: 0 1em;
            text-decoration: none;
            width: 100%;
        }

        input[type="date"]:focus {
            border: 1px solid #ff7496;
        }

        input[type="number"] {
            box-sizing: border-box;
            text-align: center;
            font-size: 1.4em;
            height: 2.7em;
            border-radius: 4px;
            border: 1px solid #c8cccf;
            color: #6a6f77;
            -web-kit-appearance: none;
            -moz-appearance: none;
            display: block;
            outline: 0;
            padding: 0 1em;
            text-decoration: none;
            width: 100%;
        }

        input[type="number"]:focus {
            border: 1px solid #ff7496;
        }

        input[type="button"] {
            box-sizing: border-box;
            text-align: center;
            font-size: 1.4em;
            height: 2.7em;
            border-radius: 4px;
            border: 1px solid #c8cccf;
            color: #6a6f77;
            -web-kit-appearance: none;
            -moz-appearance: none;
            display: block;
            outline: 0;
            padding: 0 1em;
            text-decoration: none;
            width: 100%;
        }

        .SetButton {
            width: 50%;
            left: 25%;
            margin-top: 20px;
            text-align: center;
        }
        .button{

            bottom: -100px;
            display: block;
            margin: 0 auto;
            width: 140px;
            height: 45px;
            background: #FFA9B5;
            opacity: 1;
            border-radius: 78px;
            border: none;
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 5px;
            color: #FFFFFF;

            opacity: 1;
        }
        .van-picker-column{
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="app" style="position: relative">
        <div class="SetTime">
            <span>你最近来月经的日期是</span>
        </div>
        <div class="SetDate">
            <van-field @focus="SetTimeShow" ref="ScanTextBox" v-model="form.SetTime" placeholder="请输入日期" />


        </div>
        <van-popup position="bottom" style="width:100%" v-model="show">
            <van-datetime-picker class="van-picker-column"  v-model="currentDate" @confirm="DataSelect" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" />
        </van-popup>
        <div class="SetTime">
            <span>月经持续天数(天)</span>
        </div>
        <div class="SetDate">
            <van-field @focus="SetDateShow" ref="ScanTextBox1" v-model="form.KeepTime" placeholder="请输入天数" />

        </div>
        <div class="SetTime">
            <span>月经周期(天)</span>
        </div>
        <div class="SetDate">
            <van-field @focus="SetDateShow1" ref="ScanTextBox2" v-model="form.WeekTime" placeholder="请输入周期" />
        </div>
      <!--  <button class="button"  @click="submit">确定</button>-->
       <!-- <input type="button" style="display: block;width: 100px;height:100px;margin: 0 auto;border-radius: 50%;background: #E7659D;color: white;" value="确定" @click="submit"  >-->
  <button class="button" round class="SetButton" type="info" color="#ff7496"  @click="submit">
  确&nbsp;&nbsp;定
       </button>
        <van-popup position="bottom" style="width:100%" v-model="show1">
            <van-picker   title="持续天数"  show-toolbar class="van-picker-column" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" placeholder="请输入天数" />
        </van-popup>
        <van-popup position="bottom" style="width:100%;" v-model="show2">
            <van-picker  title="月经周期" class="van-picker-column"  show-toolbar :columns="columns1" @confirm="onConfirm1" @cancel="onCancel" @change="onChange" placeholder="请输入天数" />
        </van-popup>
        <!-- <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button>-->
    </div>
</body>
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',

        data() {
            return {
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(),
                currentDate: new Date(),
                /*定义