图书租赁系统-扣费服务

在这里插入图片描述
resources中添加moment.js文件。
然后引入moment.js文件:

    <script src="/js/moment.js"></script>

借阅结束时间选完后changeDate事件:

$("input[name='endTime']").datetimepicker({format: "yyyy-mm-dd hh:ii",autoclose: true}).on('changeDate',function(ev){var  time=$("input[name='endTime']").val();const endTime = moment(time);const startTime = moment();const minutesDifference = endTime.diff(startTime, 'minutes');const money=minutesDifference/600.0;$('#money').text(money);});

图书借阅价格是1分钟1/60角。
整个代码add.html图书借阅界面:

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><th:block th:include="include :: header('新增bookorder')" /><th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-order-add"><div class="form-group">    <label class="col-sm-3 control-label">book_id:</label><div class="col-sm-8"><input name="bookId" class="form-control" type="text" th:value="${bookId}"></div></div><div class="form-group">    <label class="col-sm-3 control-label">借阅结束时间:</label><div class="col-sm-8"><div class="input-group date"><input name="endTime" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text"><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div><div class="form-group"><p>您需支付 <span id="money">0</span></p></div></form></div><th:block th:include="include :: footer" /><th:block th:include="include :: datetimepicker-js" /><script src="/js/moment.js"></script><script th:inline="javascript">var prefix = ctx + "system/order"$("#form-order-add").validate({focusCleanup: true});function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/add", $('#form-order-add').serialize());}}$("input[name='startTime']").datetimepicker({format: "yyyy-mm-dd",minView: "month",autoclose: true});$("input[name='endTime']").datetimepicker({format: "yyyy-mm-dd hh:ii",autoclose: true}).on('changeDate',function(ev){var  time=$("input[name='endTime']").val();const endTime = moment(time);const startTime = moment();const minutesDifference = endTime.diff(startTime, 'minutes');const money=minutesDifference/600.0;$('#money').text(money);});</script>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2981056.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

分享基于鸿蒙OpenHarmony的Unity团结引擎应用开发赛

该赛题旨在鼓励更多开发者基于OpenHarmony4.x版本&#xff0c;使用团结引擎创造出精彩的游戏与应用。本次大赛分为“创新游戏”与“创新3D 化应用”两大赛道&#xff0c;每赛道又分“大众组”与“高校组”&#xff0c;让不同背景的开发者同台竞技。无论你是游戏开发者&#xff…

【NoC片上网络 On-Chip Network】应用程序的网络流量 合成网络流量

应用程序的网络流量 and 合成网络流量 1. 应用程序的网络流量 APPLICATION TRAFFIC2. 合成网络流量 SYNTHETIC TRAFFIC3. 合成网络流量的具体介绍 应用程序的网络流量 and 合成网络流量 1. 应用程序的网络流量 APPLICATION TRAFFIC 在 MPSoC(多处理器片上系统) 中&#xff…

网络安全之CSRFSSRF漏洞(上篇)(技术进阶)

目录 一&#xff0c;CSRF篇 二&#xff0c;认识什么是CSRF 三&#xff0c;实现CSRF攻击的前提 四&#xff0c;实战演练 【1】案例1 【2】案例2 【3】案例3 【4】案例4&#xff08;metinfo&#xff09; 一&#xff0c;CSRF篇 二&#xff0c;认识什么是CSRF CSRF&#x…

使用ollama部署llama3-8B

windows系统 安装ollama教程如下&#xff1a;https://juejin.cn/post/7359821944147722280 如果你不仅仅满足于本地自己调试&#xff0c;还希望同事也能够访问 那么按照下面步骤走&#xff08;windows系统&#xff09; set OLLAMA_HOST0.0.0.0 ollama serve然后同一个局域网下…

uniapp app权限说明弹框2024.4.23更新

华为上架被拒绝 用uni-app开发的app&#xff0c;上架华为被拒&#xff0c;问题如下&#xff1a; 您的应用在运行时&#xff0c;未见向用户告知权限申请的目的&#xff0c;向用户索取&#xff08;电话、相机、存储&#xff09;等权限&#xff0c;不符合华为应用市场审核标准。…

图解《图搜索算法》及代码实现

关注我&#xff0c;持续分享逻辑思维&管理思维&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 有意找工作的同学&#xff0c;请参考博主的原创&#xff1a;《面试官心得--面试前应该如何准备》&#xff0c;《面试官心得--面试时如何进行自…

晶圆制造之MPW(多项目晶圆)简介

01、MPW是什么&#xff1f; 在半导体行业中&#xff0c;MPW 是 "Multi Project Wafer" 的缩写&#xff0c;中文意思是多项目晶圆。MPW 的主要思想是将使用相同工艺的多个集成电路设计放在同一晶圆片上进行流片&#xff08;即制造&#xff09;。这种方法允许多个设计共…

维基百科、百度百科和搜狗百科词条的创建流程

随着网络的发展&#xff0c;百度百科、搜狗百科、维基百科等百科网站已经成为大众获取知识的重要途径。因为百科具有得天独厚的平台优势&#xff0c;百科上的信息可信度高&#xff0c;权威性强。所以百科平台也成为商家的必争之地。这里小马识途聊聊如何创建百度百科、搜狗百科…

机器学习模型效果不好及其解决办法

当训练出来的机器学习模型效果不佳时&#xff0c;可能涉及多个方面的原因。为了改善模型的效果&#xff0c;需要系统地检查和分析问题的根源&#xff0c;并采取相应的措施进行优化。 一、数据问题 数据质量 检查数据是否干净、完整&#xff0c;是否存在噪声、异常值或缺失值。…

BBS前后端混合项目--01

总路由 # urls.py """BBS1 URL ConfigurationThe urlpatterns list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.2/topics/http/urls/ Examples: Function views1. Add an import: from my_app import views2…

python绘图时渐变的处理——以一个扇形图的渐变为例

python绘图时渐变的处理——以一个扇形图的渐变为例 使用matplotlib绘制扇形的圆环 from matplotlib.patches import Wedge wedgeWedge((0,0),1,0,60,width0.3,colorred) wedge.set_edgecolor(k) fig,axplt.subplots(1,1) ax.add_patch(wedge) # 设置坐标轴的比例 plt.axis(e…

学习Rust第14天:HashMaps

今天我们来看看Rust中的hashmaps&#xff0c;在 std::collections crate中可用&#xff0c;是存储键值对的有效数据结构。本文介绍了创建、插入、访问、更新和迭代散列表等基本操作。通过一个计算单词出现次数的实际例子&#xff0c;我们展示了它们在现实世界中的实用性。Hashm…

C++ map和set的应用

1. 关联式容器 我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。那什么是关联式容器&#xff1f;它…

开源模型应用落地-chatglm3-6b-集成langchain(十)

一、前言 langchain框架调用本地模型&#xff0c;使得用户可以直接提出问题或发送指令&#xff0c;而无需担心具体的步骤或流程。通过LangChain和chatglm3-6b模型的整合&#xff0c;可以更好地处理对话&#xff0c;提供更智能、更准确的响应&#xff0c;从而提高对话系统的性能…

【NOI】C++算法设计入门之深度优先搜索

文章目录 前言一、深度优先搜索1.引入2.概念3.迷宫问题中的DFS算法步骤4.特点5.时间、空间复杂度5.1 时间复杂度 (Time Complexity)5.2 空间复杂度 (Space Complexity)5.3 小结 二、例题讲解1.问题&#xff1a;1586 - 扫地机器人问题&#xff1a;1430 - 迷宫出口 三、总结四、感…

appium相关的知识

>adb shell dumpsys window | findstr mCurrentFocus adb devices # 实例化字典 desired_caps = dict() desired_caps[platformName] = Android desired_caps[platformVersion] = 9 # devices desired_caps[deviceName] = emulator-5554 # 包名 desired_caps[appPackage] …

IDEA pom.xml依赖警告

IDEA中&#xff0c;有时 pom.xml 中会出现如下提示&#xff1a; IDEA 2022.1 升级了检测易受攻击的 Maven 和 Gradle 依赖项&#xff0c;并建议修正&#xff0c;通过插件 Package Checker 捆绑到 IDE 中。 这并不是引用错误&#xff0c;不用担心。如果实在强迫症不想看到这个提…

STM32点灯大师(中断法)

一、使用CubeMX配置 新增加了RCC进行配置 二、代码 需要重写虚函数&#xff0c;给自己引用

JavaSE——常用API进阶二(8/8)-Arrays、Comparable、Comparator(Arrays类提供的的常见方法、用法示例)

目录 Arrays Arrays类提供的的常见方法 用法示例 Comparable、Comparator Comparable Comparator 本篇学习Arrays&#xff0c;不算作是重点知识&#xff0c;但是为学习后面的Lambda表达式打一个基础&#xff0c;或者说&#xff0c;作为铺垫。 Arrays 用来操作数组的一个…

华为OD机试 - 智能驾驶 - 广度优先搜索(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…