排行榜 统计
  • 文章总数:1168 篇
  • 评论总数:5 条
  • 分类总数:8 个
  • 最后更新:昨天 12:08

我用AI开发了一个日期天数计算器小程序,没想到这么火!

本文阅读 5 分钟
首页 常用工具 正文

一直想拥有一个属于自己的小程序,从网站爱好者,转入到小程序的赛道。可惜我进入的有点晚了,小程序赛道也是塞得满满当当。
但是只要做了,就不怕晚。就是自己给自己的一个交代吧。现在AI的时代,让不会编程的人也能轻松开发。我的朋友圈一个做运营的小姐姐,家里有和田玉的资源,也是靠着AI开发了一个小程序,方便展示自己家的和田玉。
于是,借助于豆包,我开发了一个日期天数计算器。
需求分析:
工作和生活当中,经常需要计算,多少天后是哪一天?两个日期直接相差了多少天,如果拿着日历算,天数少还可以,天数多了就麻烦了。用天数计算器一秒即可计算出来相差的天数及多少天后是哪一天。
欢迎体验:链接直达:#小程序://飞享助手/3c2K5lZQLxzAkUc
扫码直达
图片

开发之旅:
在豆包上,输入提示词:
uniapp开发一个日期天数计算器,第一个功能:可以设定一个日期后,加上多少天是哪天。第二个功能设定两个日期,计算中间相差多少天。
于是豆包给出了完整的代码:

图片

下面是一个使用 UniApp 开发的日期天数计算器的示例代码,它能实现你所要求的两个功能。创建了一个简单的 UniApp 页面,包含两个功能模块。第一个模块用于设定一个日期并加上指定天数,计算出结果日期;第二个模块用于设定两个日期,计算它们之间相差的天数。代码中运用了 uni.chooseDate 方法让用户选择日期,同时使用 JavaScript 的 Date 对象来进行日期的计算。



<template>  <view class="container">    <view class="section">      <text>设定日期加上天数计算:</text>      <uni-datetime-picker        v-model="startDate1"        type="date"        :start="minDate"        :end="maxDate"        @change="onDate1Change"      >        <template #action>          <input v-model="startDate1" placeholder="请选择日期" readonly />        </template>      </uni-datetime-picker>      <input v-model="daysToAdd" placeholder="请输入天数" type="number" />      <button @click="calculateDateAfter">计算</button>      <text v-if="resultDate1">结果日期: {{ resultDate1 }}</text>    </view>    <view class="section">      <text>计算两个日期相差天数:</text>      <uni-datetime-picker        v-model="startDate2"        type="date"        :start="minDate"        :end="maxDate"        @change="onDate2Change"      >        <template #action>          <input v-model="startDate2" placeholder="请选择开始日期" readonly />        </template>      </uni-datetime-picker>      <uni-datetime-picker        v-model="endDate"        type="date"        :start="minDate"        :end="maxDate"        @change="onEndDateChange"      >        <template #action>          <input v-model="endDate" placeholder="请选择结束日期" readonly />        </template>      </uni-datetime-picker>      <button @click="calculateDaysBetween">计算</button>      <text v-if="daysBetween">相差天数: {{ daysBetween }}</text>    </view>  </view></template><script>export default {  data() {    const now = new Date();    const minDate = new Date(now.getFullYear() - 1001).toISOString().split('T')[0];    const maxDate = new Date(now.getFullYear() + 101131).toISOString().split('T')[0];    return {      startDate1'',      daysToAdd'',      resultDate1'',      startDate2'',      endDate'',      daysBetween'',      minDate,      maxDate    };  },  methods: {    onDate1Change(date) {      console.log('选择的日期:', date);      this.startDate1 = date;    },    onDate2Change(date) {      console.log('选择的日期:', date);      this.startDate2 = date;    },    onEndDateChange(date) {      console.log('选择的日期:', date);      this.endDate = date;    },    calculateDateAfter() {      const start = new Date(this.startDate1);      const days = parseInt(this.daysToAdd);      if (!isNaN(days)) {        start.setDate(start.getDate() + days);        this.resultDate1 = start.toISOString().split('T')[0];      } else {        if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {          uni.showToast({            title'请输入有效的天数',            icon'none'          });        } else {          console.error('请输入有效的天数');        }      }    },    calculateDaysBetween() {      const start = new Date(this.startDate2);      const end = new Date(this.endDate);      const diffTime = Math.abs(end - start);      this.daysBetween = Math.ceil(diffTime / (1000 * 60 * 60 * 24));    }  }};</script><style>.container {  padding20px;}.section {  margin-bottom20px;}input {  border1px solid #ccc;  padding10px;  margin5px;}button {  padding10px 20px;  background-color#007aff;  color: white;  border: none;  border-radius5px;}</style>   

 


最初的代码的样式比较粗糙,运行中可能出现问题,可以不断与豆包进行沟通修改。


图片
我按照这个流程,不断与豆包沟通调试,最终展示效果如下:
图片
图片
如果你想了解AI生成的小程序,可以扫码进入体验!
图片

▎最新热文

用AI做的办公助手小程序,用户已突破500!

想开发自己的小程序?想好这件事!

两千套简历模板,助力你找到心仪的工作

56本心理学书籍下载分享-天才向左疯子向右/变态心理学/津巴多普通心理学等

100张思维模型思维导图盘点.pdf


本文来自投稿,不代表本站立场,如若转载,请注明出处:https://typecho.firshare.cn/archives/5775.html
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。避免网络欺诈,本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易,则需自行承担后果。本站在注明来源的前提下推荐原文至此,仅作为优良公众、公开信息分享阅读,不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
-- 展开阅读全文 --
想开发自己的小程序?想好这件事!
« 上一篇 04-15
职场上是不是一定要靠关系才会成功?
下一篇 » 04-15