【知了堂学习笔记】_JavaScript之DOM操作案例(ATM机)

2024-03-14 02:08

本文主要是介绍【知了堂学习笔记】_JavaScript之DOM操作案例(ATM机),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

请关注“知了堂学习社区”,地址:http://www.zhiliaotang.com/portal.php

js操作DOM的小案例——ATM机

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{width: 300px;height:200px;margin: 0 auto;border: 1px solid black;border-radius: 5px;text-align: center;}p{font-size: 20px;}input{width: 150px;height:20px;}button{border: 0px;padding: 5px;background-color: green;color: white;}</style><body><div><p>ATM机</p><p><label>账号:</label><input type="text" id="account"></p><p><label>密码:</label><input type="password" id="passwordatm"></p><p onclick="login()"><button >登录</button></p></div></body>
</html>
<script>var i=2;//输入的次数//判断卡号是否位数字function isNaNAccount(account){return isNaN(account);}//判断输入的卡号和密码是否为空function isNaNAccountAndPwd(account,passwordatm){if((account.length>0)&&(passwordatm.length>0)){return true;}return false;}//登录事件function login(){var account = document.getElementById("account").value;var passwordatm = document.getElementById("passwordatm").value;console.log(typeof account);console.log(passwordatm);if(isNaNAccount(account)){alert("卡号必须是数字");return;}if(!(isNaNAccountAndPwd(account,passwordatm))){alert("卡号和密码都不能为空");return;}if((i>0) && (account=="123456789")&&(passwordatm="123")){window.location.href="http://127.0.0.1:8020/reviewJS/DOM%E6%93%8D%E4%BD%9C/ATMindex.html?__hbt=1512374587088";}else{if(i==0){alert("你的账号已被锁定!");return;}alert("你还剩"+i+"次机会!");i--;return ;}}
</script>

ATM机主页

实现了取款,存款的操作
取款的金额超过余额,将有错误提示,不允许操作

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{width: 300px;height:200px;margin: 0 auto;border: 1px solid black;border-radius: 5px;text-align: center;}p{font-size: 20px;text-align: left;}input{width: 150px;height:20px;}button{border: 0px;padding: 5px;background-color: green;color: white;}</style><body><div><p><label>余额:</label><input type="text" id="balance" value="2000.00" disabled="disabled"></p><p><label>存款:</label><input type="text" id="deposit">&nbsp;<button onclick="deposit()">存款</button></p><p><label>取款:</label><input type="text" id="withdraw">&nbsp;<button onclick="withDraw()">取款</button></p></div></body>
</html><script>//输入的是否为数字function isNumber(number){return isNaN(number);}//存款操作function deposit(){var balance = parseFloat(document.getElementById("balance").value);var deposit = document.getElementById("deposit").value;if(!deposit.length>0){alert("请输入你要存款的金额..");return;}if(isNumber(deposit)){alert("请输入数字!");return;}balance += parseFloat(deposit);document.getElementById("balance").value = balance;}//取款操作function withDraw(){var balance = parseFloat(document.getElementById("balance").value);console.log(typeof balance);var withdraw =document.getElementById("withdraw").value;if(!withdraw.length>0){alert("请输入你要取款的金额..");return;}if(isNumber(withdraw)){alert("请输入数字!");return;}if(parseFloat(withdraw) >balance){alert("余额不足请重新输入!");return;}balance -=withdraw;document.getElementById("balance").value = balance;}
</script>

这篇关于【知了堂学习笔记】_JavaScript之DOM操作案例(ATM机)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。(1)简单定义-什么是

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.

java中long的一些常见用法

《java中long的一些常见用法》在Java中,long是一种基本数据类型,用于表示长整型数值,接下来通过本文给大家介绍java中long的一些常见用法,感兴趣的朋友一起看看吧... 在Java中,long是一种基本数据类型,用于表示长整型数值。它的取值范围比int更大,从-922337203685477

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用

java Long 与long之间的转换流程

《javaLong与long之间的转换流程》Long类提供了一些方法,用于在long和其他数据类型(如String)之间进行转换,本文将详细介绍如何在Java中实现Long和long之间的转换,感... 目录概述流程步骤1:将long转换为Long对象步骤2:将Longhttp://www.cppcns.c

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte