[知了堂学习笔记] javascript DOM练习案例
来源：互联网 发布：网络信息监控 编辑：程序博客网 时间：2024/05/22 13:54
随机验证码的实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #image{ height: 40px; width: 90px; border: 2px solid darkgray; margin-left: 10px; text-align: center; font-size: larger; line-height: 40px; } .fl{ float: left; } #in{ margin-top: 5px; height: 30px; } #change{ position: relative; top: 20px; left: 5px; text-decoration: none; } #button{ margin-top: 20px; margin-left: 10px; } </style> </head> <body> <span class="fl"><input type="text" placeholder="请输入图片中的验证码" id="in"/></span> <span class="fl"><div id="image"></div></span> <span class="fl"><a href="#" id="change" onclick="createCode()">换一张</a></span> <span><button id="button" onclick="checkCode()">提交</button></span> <div id="tishi"></div> </body> <script> /** * 思路： * 1.定义验证码 * 2.找到验证码放在html的位置 * 3.定义随机验证码位数(4位) * 4.定义数组 存放随机数 * 5.循环产生四位数 * 6.通过Math.floor(Math.random()*XX)产生随机索引值 * 7.将随机索引值对应的内容加在随机数上 */ var code;//全局定义验证码 function createCode(){//页面加载时生成随机验证码 code = "";//初始化为字符串 var codeLength = 4;//随机数个数 //定义随机数数组 var randomCode = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"); for(var i = 0;i < codeLength;i++){ var randomNumber = Math.floor(Math.random()*36);//随机索引 code += randomCode[randomNumber]; } //把随机数放到页面 //找到位置createCode(); /** * 出现一个错误 document.getElementById("image").innerText(code);不是一个函数 */ document.getElementById("image").innerText=code; } //页面加载时产生验证码 window.onload = function(){ createCode(); } //验证输入验证码与产生的验证码是否相符 /** * 1.得到当前验证码框里的值 * 2.得到输入框中的值 * 3.比较两个值是否相同 * 4.根据比较结果返回不同的值 */ function checkCode(){ //验证框中的值 var codeNow = code;//code是全局变量 ，可以直接获得 alert(codeNow); //输入框中的值 var inputNow = document.getElementById("in").value; alert(inputNow); if(codeNow == inputNow){ document.getElementById("tishi").innerHTML = "<p style='color: lawngreen;'>√验证正确</p>"; }else{ document.getElementById("tishi").innerHTML = "<p style='color: red;'>×验证失败</p>"; } } </script></html>实现验证码的验证功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #image{ height: 40px; width: 90px; border: 2px solid darkgray; margin-left: 10px; text-align: center; font-size: larger; line-height: 40px; } .fl{ float: left; } #in{ margin-top: 5px; height: 30px; } #change{ position: relative; top: 20px; left: 5px; text-decoration: none; } #button{ margin-top: 20px; margin-left: 10px; } </style> </head> <body> <span class="fl"><input type="text" placeholder="请输入图片中的验证码" id="in"/></span> <span class="fl"><div id="image"></div></span> <span class="fl"><a href="#" id="change" onclick="createCode()">换一张</a></span> <span><button id="button" onclick="checkCode()">提交</button></span> <div id="tishi"></div> </body> <script> /** * 思路： * 1.定义验证码 * 2.找到验证码放在html的位置 * 3.定义随机验证码位数(4位) * 4.定义数组 存放随机数 * 5.循环产生四位数 * 6.通过Math.floor(Math.random()*XX)产生随机索引值 * 7.将随机索引值对应的内容加在随机数上 */ var code;//全局定义验证码 function createCode(){//页面加载时生成随机验证码 code = "";//初始化为字符串 var codeLength = 4;//随机数个数 //定义随机数数组 var randomCode = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"); for(var i = 0;i < codeLength;i++){ var randomNumber = Math.floor(Math.random()*36);//随机索引 code += randomCode[randomNumber]; } //把随机数放到页面 //找到位置createCode(); /** * 出现一个错误 document.getElementById("image").innerText(code);不是一个函数 */ document.getElementById("image").innerText=code; } //页面加载时产生验证码 window.onload = function(){ createCode(); } //验证输入验证码与产生的验证码是否相符 /** * 1.得到当前验证码框里的值 * 2.得到输入框中的值 * 3.比较两个值是否相同 * 4.根据比较结果返回不同的值 */ function checkCode(){ //验证框中的值 var codeNow = code;//code是全局变量 ，可以直接获得 alert(codeNow); //输入框中的值 var inputNow = document.getElementById("in").value; alert(inputNow); if(codeNow == inputNow){ document.getElementById("tishi").innerHTML = "<p style='color: lawngreen;'>√验证正确</p>"; }else{ document.getElementById("tishi").innerHTML = "<p style='color: red;'>×验证失败</p>"; } } </script></html>ATM机案例
- 登录：要求用户输入卡号和密码。如果三次之内可以重复输入；三次输入错误，则退出系统
- 登录成功后，显示主界面。要求用户输入所需操作，然后调用相应的函数，实现操作。操作完成后，再回到主界面，继续要求用户输入所需的操作
- 存款：要求用户输入存款金额，完成存款操作
- 取款：如果超支，不允许取款，并给予提示（在原来金额基础上减上存款金额）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #login{ border: 2px solid black; border-radius: 10px; height: 240px; width: 400px; } .lo{ height: 50px; width: 400px; text-align: center; font-family: "微软雅黑"; } #title{ margin-top: 5%; } .shu{ width: 200px; border-color: coral; margin-left: 10px; } .butt{ background-color: greenyellow; height: 30px; width: 60px; border: 2px solid darkgray; } #main{ border: 2px solid black; border-radius: 10px; height: 200px; width: 450px; margin-top: 10%; display: none; } #cun{ margin-top: 10%; } #qu{ margin-top: 10%; } #exit{ margin-top: 10%; background-color: greenyellow; height: 30px; width: 60px; border: 2px solid darkgray; } </style> </head> <body> <div id="login"> <div id="title" class="lo">ATM机</div> <div id="number" class="lo">卡号:<input type="text" id="cardNumber" class="shu"/></div> <div id="password" class="lo">密码:<input type="password" id="cardPassword" class="shu"/></div> <div id="button" class="lo"><button id="but" onclick="login()" class="butt">登录</button></div> </div> <div id="main"> <div class="lo">请输入存款金额：<input type="text" class="shu" id="cun"/><button onclick="saveMoney()">存款</button></div> <div class="lo">请输入取款金额：<input type="text" class="shu" id="qu"/><button onclick="getMoney()">取款</button></div> <div id="button" class="lo"><button onclick="exit()" id="exit">退出</button></div> </div> </body> <script type="text/javascript"> /** * 登录验证 * 1.判断卡号是否为空 * 2.判断密码是否为空 * 3.判断卡号和密码是否匹配 * 4.三次输错则弹出提示框，退出系统 */ var num = 0;//登录错误次数 var money = 10000;//当前账户总金额 //登录 function login(){ //得到卡号值 var cardNumber = document.getElementById("cardNumber").value; //得到密码值 var cardPassword = document.getElementById("cardPassword").value; //判断卡号是否为空 if(cardNumber =="" || cardNumber == null){ alert("卡号为空！请输入卡号！"); } if(cardPassword == "" || cardPassword == null){ alert("密码为空！请输入密码！"); } if(cardNumber != "" && cardNumber != null && cardPassword != "" && cardPassword != null){ if(cardNumber.length != 11){//设置卡号长度 alert("非法卡号，请重新输入！"); }else{ if(cardPassword != "123456789"){//判断密码 alert("密码错误！请重新输入!"); num++; if(num == 3){ alert("您已经连续三次输错密码！退出系统！"); var divLogin = document.getElementById("login"); divLogin.style.display="none"; } }else{ //显示主界面 //隐藏登录界面div 显示主界面div document.getElementById("login").style.display="none"; document.getElementById("main").style.display ="block"; } } } } //存款操作 function saveMoney(){ //得到存款金额 var saveMoney = parseInt(document.getElementById("cun").value); money = money + saveMoney; alert("您已经成功存入:￥"+saveMoney); alert(money); } //取款操作 function getMoney(){ //得到取款金额 var getMoney = parseInt(document.getElementById("qu").value); if(money < getMoney){ alert("当前余额不足，请重新输入取款金额！"); }else{ money = money - getMoney; alert("您已经成功去处:￥"+getMoney); alert(money); } } //退出操作 function exit(){ document.getElementById("login").style.display="block"; document.getElementById("main").style.display ="none"; } </script></html>请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
阅读全文
0 0
- [知了堂学习笔记] javascript DOM练习案例
- [知了堂学习笔记] javascript DOM学习
- [知了堂学习笔记] javascript基础练习
- [知了堂学习笔记]_JavaScript之DOM
- 【知了堂学习笔记】_JavaScript之DOM操作案例（验证码）
- 【知了堂学习笔记】_JavaScript之DOM操作案例（ATM机）
- [知了堂学习笔记] javascript入门
- [知了堂学习笔记] javascript 内置对象
- [知了堂学习笔记] javascript 正则表达式
- [知了堂学习笔记] javascript BOM
- [知了堂学习笔记]_JS的DOM基本操作
- [知了堂学习笔记] JQuery对DOM的操作
- [知了堂学习笔记]_jQuery对DOM的操作
- [知了堂学习笔记] javascript数据类型、运算符、控制语句
- 【知了堂学习笔记】JFreeChart
- [知了堂学习笔记]_JavaScript
- [知了堂学习笔记]_JavaScript之DOM事件（许愿墙）
- 【知了堂学习笔记】_JavaScript之DOM操作（英语在线翻译）
- Python checkio Long Repeat解决方案
- RecyclerView 实现循环滚动
- 一文读懂Apache Kylin
- python编程思维导图
- 快速排序
- [知了堂学习笔记] javascript DOM练习案例
- 坦克小战的游戏规则说明（3）
- Ajax最详细的参数解析和场景应用
- gson解析复杂的json数据
- ffmpeg精简
- java使用redis，配置jedis
- 复习数据库面试题
- Spring之JDBCTemplate学习
- Excel的xml表现格式
