[知了堂学习笔记] javascript DOM练习案例
随机验证码的实现
<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 = "√验证正确
";
}else{
document.getElementById("tishi").innerHTML = "×验证失败
";
}
}
script>
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 = "√验证正确
";
}else{
document.getElementById("tishi").innerHTML = "×验证失败
";
}
}
script>
html>
ATM机案例
- 登录：要求用户输入卡号和密码。如果三次之内可以重复输入；三次输入错误，则退出系统
- 登录成功后，显示主界面。要求用户输入所需操作，然后调用相应的函数，实现操作。操作完成后，再回到主界面，继续要求用户输入所需的操作
- 存款：要求用户输入存款金额，完成存款操作
- 取款：如果超支，不允许取款，并给予提示（在原来金额基础上减上存款金额）
<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