JavaWeb：（练习）五、JavaScript-计算器、表单、正则练习
JavaWeb：（练习）五、JavaScript-计算器、表单、正则练习
一、计算器练习
1、练习目标
一个简单的计算器练习（计算未能实现）
2、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的计算器</title>
<link href="Demo.css" rel="stylesheet" type="text/css" />
<script src="Demo.js" type="text/javascript"></script>
</head>
<body>
<div class="computer">
<input id="screen_id" class="screen" type="text" value="" readonly="readonly" />
<table class="keyboard">
<tr>
<td>
<input class="key_button" type="button" value="7" onclick="input('7')" />
</td>
<td>
<input class="key_button" type="button" value="8" onclick="input('8')" />
</td>
<td>
<input class="key_button" type="button" value="9" onclick="input('9')" />
</td>
<td>
<input class="key_button" type="button" value="+" onclick="input('+')" />
</td>
</tr>
<tr>
<td>
<input class="key_button" type="button" value="4" onclick="input('4')" />
</td>
<td>
<input class="key_button" type="button" value="5" onclick="input('5')" />
</td>
<td>
<input class="key_button" type="button" value="6" onclick="input('6')" />
</td>
<td>
<input class="key_button" type="button" value="-" onclick="input('-')" />
</td>
</tr>
<tr>
<td>
<input class="key_button" type="button" value="1" onclick="input('1')" />
</td>
<td>
<input class="key_button" type="button" value="2" onclick="input('2')" />
</td>
<td>
<input class="key_button" type="button" value="3" onclick="input('3')" />
</td>
<td>
<input class="key_button" type="button" value="*" onclick="input('*')" />
</td>
</tr>
<tr>
<td>
<input class="key_button" type="button" value="0" onclick="input('0')" />
</td>
<td>
<input class="key_button" type="button" value="c" onclick="clearScreen()" />
</td>
<td>
<input class="key_button" type="button" value="=" onclick="calculate()" />
</td>
<td>
<input class="key_button" type="button" value="/" onclick="input('/')" />
</td>
</tr>
</table>
</div>
</body>
</html>
3、CSS代码
*{
margin: 0;
padding: 0;
}
.computer{
background-color: gray;
width: 500px;
height: 300px;
margin: auto;
margin-top: 100px;
}
.screen{
width: 400px;
height: 40px;
margin: 10px 50px;
}
.keyboard{
width: 400px;
height: 200px;
margin: 10px 50px;
}
.key_button{
background-color: lightgrey;
font-size: 16px;
width: 80px;
height: 30px;
margin: 10px 10px;
}
4、js代码
function clearScreen() {
document.getElementById("screen_id").value = "";
}
function calculate(){
document.getElementById("screen_id").value = "得到计算结果";
}
function input(value) {
var keyButtonObj = document.getElementById("screen_id");
if (keyButtonObj.value == "得到计算结果") {
keyButtonObj.value = value;
} else {
keyButtonObj.value += value;
}
}
5、网页结果
二、表单、正则练习
1、练习目标
对注册表单做输入验证(性别默认选中不做验证,重点电话,职业和爱好 )。
用户名不能为空,长度为6-10区间
密码不能为空
性别默认选中一个不做处理
职业,爱好必须至少选择一个
当某个内容输入不符合规则时,弹框提示信息.
当所有内容全部按要求完成后,提示信息输入合格
注：实现时适当修改了部分要求
2、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入验证</title>
<link href="Demo.css" rel="stylesheet" type="text/css" />
<script src="Demo.js" type="text/javascript"></script>
</head>
<body>
<form>
<div class="box">
<h1 class="head">欢迎注册</h1>
<div class="form_box">
<ul class="form_list">
<li>
<span class="tips">用户名：</span>
<div class="form_content">
<input id="name_id" type="text" onblur="checkName()" />
<span id="name_tips_id"></span>
</div>
</li>
<li>
<span class="tips">密码：</span>
<div class="form_content">
<input id="password_id" type="password" onblur="checkPassword()" />
<span id="password_tips_id"></span>
</div>
</li>
<li>
<span class="tips">性别：</span>
<div class="form_content">
<input type="radio" name="gender" checked="checked" />男
<input type="radio" name="gender" />女
<span id="gender_tips_id"></span>
<div style="clear: left;"></div>
</div>
</li>
<li>
<span class="tips">电话：</span>
<div class="form_content">
<input id="phone_id" type="text" onblur="checkPhone()" />
<span id="phone_tips_id"></span>
</div>
</li>
<li>
<span class="tips">职业：</span>
<div class="form_content">
<select id="work_id" onchange="checkWork()">
<option value="无" >请选择</option>
<option value="程序猿" >程序猿</option>
<option value="工程狮" >工程狮</option>
</select>
<span id="work_tips_id"></span>
<div style="clear: left;"></div>
</div>
</li>
<li>
<span class="tips">爱好：</span>
<div class="form_content">
<input type="checkbox" value="敲代码" name="hobby" onclick="selectThis()"/>敲代码
<input type="checkbox" value="打游戏" name="hobby" onclick="selectThis()"/>打游戏
<input type="checkbox" value="唱歌" name="hobby" onclick="selectThis()"/>唱歌
<input type="checkbox" value="运动" name="hobby" onclick="selectThis()"/>运动
<span id="hobby_tips_id"></span>
</div>
<div style="clear: left;"></div>
</li>
<li>
<span class="address_tips">地址：</span>
<div class="form_content">
<textarea id="address_id" class="address_text" onblur="checkAddress()"></textarea>
<span id="address_tips_id"></span>
</div>
<div style="clear: left;"></div>
</li>
</ul>
</div>
<h3 class="bottom">填写完成后点击下面提交按钮提交表单</h3>
<div class="button_box">
<input class="button_submit" type="button" value="提交" onclick="submitList()" />
<input class="button_reset" type="reset" value="重置" onclick="" />
</div>
</div>
</form>
</body>
</html>
3、CSS代码
*{
margin: 0;
padding: 0;
}
.box{
background-color: #2493FF;
width: 500px;
height: 292px;
margin: auto;
margin-top: 100px;
}
.head,.bottom{
color: white;
text-align: center;
}
div{
background-color: #B4DAFF;
}
ul{
list-style: none;
}
.tips,.address_tips{
border: 1px #B4DAFF solid;
width: 178px;
text-align: right;
float: left;
}
.form_content{
width: 320px;
margin-left: 180px;
}
.address_tips{
margin-top: 10px;
}
.address_text{
width: 200px;
height: 40px;
}
.button_box{
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button_submit,.button_reset{
padding: 2px 10px;
}
4、js代码
function checkName(){
var nameObj = document.getElementById("name_id");
var tipsObj = document.getElementById("name_tips_id");
if (nameObj.value.length<6 || nameObj.value.length>10) {
tipsObj.style.color = "red";
tipsObj.innerHTML = "×在6-10位之间";
return false;
} else {
tipsObj.style.color = "green";
tipsObj.innerHTML = "√正确";
return true;
}
}
function checkPassword(){
var passwordObj = document.getElementById("password_id");
var tipsObj = document.getElementById("password_tips_id");
if (passwordObj.value.length == 0) {
tipsObj.style.color = "red";
tipsObj.innerHTML = "×密码不能为空";
return false;
} else {
tipsObj.style.color = "green";
tipsObj.innerHTML = "√正确";
return true;
}
}
function checkPhone(){
var phoneObj = document.getElementById("phone_id");
var tipsObj = document.getElementById("phone_tips_id");
var reg = /^1[3578]\d{9}$/;
if (reg.test(phoneObj.value)) {
tipsObj.style.color = "green";
tipsObj.innerHTML = "√正确";
return true;
} else {
tipsObj.style.color = "red";
tipsObj.innerHTML = "×错误";
return false;
}
}
function checkWork() {
var workObjs = document.getElementById("work_id");
var tipsObj = document.getElementById("work_tips_id");
var work = workObjs.options[workObjs.selectedIndex].value
if (work == "无") {
tipsObj.style.color = "red";
tipsObj.innerHTML = "×请选择";
return false;
} else {
tipsObj.style.color = "green";
tipsObj.innerHTML = "√正确";
return true;
}
}
function checkHobby() {
var workObjs = document.getElementsByName("hobby");
var tipsObj = document.getElementById("hobby_tips_id");
var checkedWorks = new Array;
var index = 0;
for (var i=0; i<workObjs.length ;i++) {
if (workObjs[i].checked) {
checkedWorks[index++] = workObjs[i].value;
}
}
if (index == 0) {
tipsObj.style.color = "red";
tipsObj.innerHTML = "×至少一项";
return false;
} else {
tipsObj.style.color = "green";
tipsObj.innerHTML = "√正确";
return true;
}
}
function selectThis() {
var tipsObj = document.getElementById("hobby_tips_id");
tipsObj.innerHTML = "";
}
function checkAddress(){
var addressObj = document.getElementById("address_id");
var tipsObj = document.getElementById("address_tips_id");
if (addressObj.value.length == 0) {
tipsObj.style.color = "red";
tipsObj.innerHTML = "×不能为空";
return false;
} else {
tipsObj.style.color = "green";
tipsObj.innerHTML = "√正确";
return true;
}
}
function submitList() {
var flag = checkName() && checkPassword() && checkPhone() && checkWork() && checkHobby() && checkAddress();
if (flag) {
alert("提交成功！");
} else {
alert("数据错误");
}
}
5、网页结果
3447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
