前端-js例子:收钱转账

news2024/12/24 9:18:23

支付宝转账

在这里用到周期定时器setInterval(function,time),设置达到目标钱数时停止定时器。

点击转账按钮时,开始函数显示。

同时要确定输入框里输入的是数字。(有一定容错)

window.onload=function(){
            var btn =document.querySelector(".btn")
            var container=document.querySelector(".container")
            var money=document.querySelector(".money")
            var timer
            var change=function(target){
                // container.innerHTML=parseInt(container.innerHTML)+parseInt(money.value) 
                // var target=parseInt(container.innerHTML)+parseInt(money.value)
                container.innerHTML=parseInt(container.innerHTML)+1 
                if(container.innerHTML>=target){
                    // container.innerHTML=target
                    clearInterval(timer)
                }
            }
            btn.onclick=function(){
                // console.log(900)
                // console.log("700")
                // console.log(container.innerHTML)
                // console.log(typeof container.innerHTML)
                // console.log(money.value)
                // console.log(typeof money.value)
                var target=parseInt(container.innerHTML)+parseInt(money.value)
                
                if(!isNaN(parseInt(money.value))){
                    // container.innerHTML=parseInt(container.innerHTML)+parseInt(money.value) 
                    // change()
                    timer=setInterval(function(){
                        change(target)
                    },1000)

                }else{
                    alert("金额必须为数字")
                }
            }

转账后:

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

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

相关文章

vue3 + ts + pnpm:nprogress / 页面顶部进度条

一、简介 nprogress 是一个轻量级的进度条库,它适用于在网页上添加顶部进度条,用于指示页面加载进度或任何长时间的运行过程。这个库非常流行,因为它易于使用且视觉效果很好。 二、安装 pnpm add nprogress 三、在使用的页面引入 / src/v…

MySQL连接查询解析与性能优化成本

文章目录 一、连接查询1.连接查询基础1. INNER JOIN内连接2. LEFT JOIN (或 LEFT OUTER JOIN)左外连接3. RIGHT JOIN (或 RIGHT OUTER JOIN)右外连接4. FULL OUTER JOIN 2.连接查询的两种过滤条件3.连接的原理 二、性能优化成本1.基于成本的优化2.调节成本常数(1)mysql.server_…

ECharts基础使用方法 ---vue

1.安装依赖文件 仔细看项目" README.md " 描述,确定用什么安装 npm npm install echarts --save //官网推荐使用 pnpm pnpm install echarts --save 其他也是 在项目根目录,打开当前目录命令控制栏,输入以上命令并运行 安装成功后…

动动手指探索世界,旅游APP如何定制开发?

旅游APP的出现为旅行带来了许多便利。随着移动互联网的发展,旅游行业也在不断寻求创新与变革。旅游APP为游客提供了更加便捷的旅行体验,通过旅游APP,用户可以了解旅游信息、旅游服务、在线咨询等,实现在线一站式解决旅行需求的目标…

Github 2024-09-23 开源项目周报 Top15

根据Github Trendings的统计,本周(2024-09-23统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目6C++项目3C项目3HTML项目2PowerShell项目1TypeScript项目1JavaScript项目1Blade项目1PHP项目1Bootstrap 5: Web上开发响应式、移动优…

【文心智能体】 旅游手绘手帐 开发分享 零代码 手绘风景 记录行程和心情 旅游攻略

旅游手绘手帐,点击文心智能体平台AgentBuilder | 想象即现实 (baidu.com) 目录 背景 创作灵感 开发历程 一、基础配置 二、高级配置 三、引导示例(提示词) 期待优化 背景 这个智能体是一个零代码智能体(文心智能体平台现…

MySQL篇(管理工具)

目录 一、系统数据库 二、常用工具 1. mysql 2. mysqladmin 3. mysqlbinlog 4. mysqlshow 5. mysqldump 6. mysqlimport/source 6.1 mysqlimport 6.2 source 一、系统数据库 MySQL数据库安装完成后,自带了一下四个数据库,具体作用如下&#xf…

JDBC和一下重要的jar包,分层结构

系列文章目录 JDBC和方便使用的jar包 目录 系列文章目录 文章目录 一、JDBC 1.步骤 2.SQL注入 3.SQL注入解决(PreparedStatement) 4.批处理和事务控制 5.连接池 Druid连接池(德鲁伊) 6.封装为工具类 7.ThreadLocal 、小秘书 二、…

大语言模型(LLM)入门学习路线图

Github项目上有一个大语言模型学习路线笔记,它全面涵盖了大语言模型的所需的基础知识学习,LLM前沿算法和架构,以及如何将大语言模型进行工程化实践。这份资料是初学者或有一定基础的开发/算法人员入门活深入大型语言模型学习的优秀参考。这份…

【FPGA】FPGA芯片结构

目录 1 可编程输出/输出单元(IOB)2 可配置逻辑块(CLB)3 数字时钟管理模块(DCM)4 嵌入式块存储器(BRAM)5 布线资源6 内嵌功能模块(专用IP单元)6.1 PLL&#xf…

SpringBoot简易商品管理系统

> 这是一个基于SpringBootThymeleaf实现的简易商品管理系统。 > 包含基本的登录/注册与商品管理功能。 > 界面简洁美观,代码结构清晰,适用于JAVA初学者在此基础上进行二次开发。 一、项目演示 二、技术框架 框架描述Spring Boot容器管理 S…

CV之OCR:GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略

CV之OCR:GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略 目录 GOT-OCR2.0的简介 1、更新 GOT-OCR2.0的安装和使用方法 1、安装 安装环境cuda11.8torch2.0.1 安装包 安装Flash-Attention GOT权重:1.43G 2、演示 3、训练 4、评估 GOT-…

Tomcat靶场攻略

一.CVE-2017-12615 1.首页抓包,修改为 PUT 方式提交 ,将jsp木马写到数据包中 2.哥斯拉默认秘钥连接 二.后台弱⼝令部署war包 1.制作WAR包,上传 将JSP⽊⻢压缩为ZIP格式,然后修改后缀为war 2.文件上传成功后,默认会在网站根目录下生成和wa…

使用centos7搭建wiki论坛,使用nginx网站来搭建wiki负载均衡,反向代理。

1.安装一个wget,进入目录opt下 #安装wget yum -y install wget#进入目录/opt/下面 cd /opt/2.获取 mysql8.0 rpm包,安装mysql8.0,安装mysql-server,yum会自动下载所需安装及依赖包. #获取 mysql8.0 rpm包 wget https://dev.mysql.com/get/mysql80-comm…

2024人工智能结课作业-DFS/BFS/Astar解决数码问题

1 深度优先遍历搜索(DFS) 1.1算法介绍 深度优先搜索算法(Depth-First-Search,DFS)是一种用于遍历或搜索树或图的算法。沿着树的深度遍历树的节点,尽可能深的搜索树的分支。当节点v的所在边都己被探寻过,搜索将回溯到发…

基于SSM的“在线CRM管理系统”的设计与实现(源码+数据库+文档+开题报告)

基于SSM的“在线CRM管理系统”的设计与实现(源码数据库文档开题报告) 开发语言:Java 数据库:MySQL 技术:SSM 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 总体功能模块图 登录页面 后台管理页面 产品信息页面 客…

【Android】BottomSheet基本用法总结(BottomSheetDialog,BottomSheetDialogFragment)

BottomSheet BottomSheet 是一种位于屏幕底部的面板,用于显示附加内容或选项。提供了从屏幕底部向上滑动显示内容的交互方式。这种设计模式在 Material Design 中被广泛推荐,因为它可以提供一种优雅且不干扰主屏幕内容的方式来展示额外信息或操作。 具体…

大型综合医院供配电系统设计

摘要:众所周知,医院供配电系统关系着整个医院的正常运行,一旦出现故障将会对病患的安全造成威胁。基于此,本文就大型综合医院供配电系统设计进行深入探讨,以期为其他类似医院建筑供配电系统设计提供借鉴。 关键词&…

代理模式详解:控制对象访问的利器

代理模式(Proxy Pattern)是一种结构型设计模式,它为其他对象提供一种代理以控制对这个对象的访问。代理模式通常用于延迟对象的创建、控制对对象的访问或在访问对象时添加一些额外的操作。 代理模式通过引入一个代理对象来控制对目标对象的访…

超详细超实用!!!AI编程之cursor配置中文(一)

云风网 云风笔记 云风知识库 一、配置中文扩展 打开扩展,搜索chinese,安装chinese(simplified) 简体中文语言包,重启即可 二、配置中文方法二 使用快捷键组合【CtrlShiftp】,在搜索框中输入configure display language,选择中文也可配置中文 三、配置…