- 科技
- JavaScript练习小demo
文章目录
输入校验网页中的计算器切换图片
输入校验
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>用户输入校验
</title
>
<style type
="text/css">
img
{
width
: 20px
;
height
: 20px
;
display
: none
;
}
</style
>
<script type
="text/javascript">
var regPhone
= /^1(3|4|5|7|8)\d{9}$/;
var regEmail
= /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
function checkPhone() {
if (regPhone
.test(document
.getElementById("phone").value
)) {
document
.getElementById("check1").innerHTML
= '';
document
.getElementById("checkpic1").style
.display
= 'inline';
return true;
} else {
document
.getElementById("check1").innerHTML
= '输入有误';
document
.getElementById("check1").style
.color
= 'red';
document
.getElementById("checkpic1").style
.display
= 'none';
return false;
}
}
function checkEmail() {
if (regEmail
.test(document
.getElementById("email").value
)) {
document
.getElementById("check2").innerHTML
= '';
document
.getElementById("checkpic2").style
.display
= 'inline';
return true;
} else {
document
.getElementById("check2").innerHTML
= '输入有误';
document
.getElementById("check2").style
.color
= 'red';
document
.getElementById("checkpic2").style
.display
= 'none';
return false;
}
}
function checkSubmit() {
return checkEmail() && checkPhone();
}
</script
>
</head
>
<body
>
<form action
="homework1.html" method
="get" onsubmit
="return checkSubmit()">
手机号：
<input type
="text" name
="phone" id
="phone" onchange
="checkPhone()" /><span id
="check1"></span
><img id
="checkpic1"
src
="img/对号.jpg" /><br
>
邮箱：
<input type
="text" name
="email" id
="email" onchange
="checkEmail()" /><span id
="check2"></span
><img id
="checkpic2"
src
="img/对号.jpg" /><br
>
<input type
="submit" value
="提交" />
</form
>
</body
>
</html
>
网页中的计算器
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>网页中的计算器
</title
>
<style type
="text/css">
.scanner
{
width
: 168px
;
height
: 40px
;
}
.key
{
width
: 40px
;
height
: 40px
;
}
.key0
{
width
: 85px
;
height
: 40px
;
}
</style
>
<script type
="text/javascript">
function getValue(obj
) {
var def
= document
.getElementById("scanner").value
;
document
.getElementById("scanner").value
= def
+ obj
.value
;
}
function cal() {
document
.getElementById("scanner").value
= eval(document
.getElementById("scanner").value
);
}
function reset() {
document
.getElementById("scanner").value
= '';
}
</script
>
</head
>
<body
>
<table border
="1px" cellspacing
="1px" cellpadding
="1px">
<tr
>
<td colspan
="4"><input type
="text" name
="scanner" class="scanner" id
="scanner" disabled
="disabled" /></td
>
</tr
>
<tr
>
<td
><input type
="button" name
="" id
="" class="key" value
="7" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="8" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="9" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="+" onclick
="getValue(this)" /></td
>
</tr
>
<tr
>
<td
><input type
="button" name
="" id
="" class="key" value
="4" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="5" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="6" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="-" onclick
="getValue(this)" /></td
>
</tr
>
<tr
>
<td
><input type
="button" name
="" id
="" class="key" value
="1" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="2" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="3" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="*" onclick
="getValue(this)" /></td
>
</tr
>
<tr
>
<td colspan
="2"><input type
="button" name
="" id
="" class="key0" value
="0" onclick
="getValue(this)" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="=" onclick
="cal()" onblur
="reset()" /></td
>
<td
><input type
="button" name
="" id
="" class="key" value
="/" onclick
="getValue(this)" /></td
>
</tr
>
</table
>
</body
>
</html
>
切换图片
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>切换图片
</title
>
<script type
="text/javascript">
function firstPic() {
setPath(1);
setAtt(1);
}
function backPic() {
var backnum
= getNum() - 1;
setPath(backnum
);
setAtt(backnum
);
}
function nextPic() {
var nextnum
= getNum() + 1;
setPath(nextnum
);
setAtt(nextnum
);
}
function lastPic() {
setPath(8);
setAtt(8);
}
function setAtt(num
) {
if (num
=== 1) {
document
.getElementById("buttion1").disabled
= true;
document
.getElementById("buttion2").disabled
= true;
} else {
document
.getElementById("buttion1").disabled
= false;
document
.getElementById("buttion2").disabled
= false;
}
if (num
=== 8) {
document
.getElementById("buttion3").disabled
= true;
document
.getElementById("buttion4").disabled
= true;
} else {
document
.getElementById("buttion3").disabled
= false;
document
.getElementById("buttion4").disabled
= false;
}
}
function getNum() {
var path
= document
.getElementById("picture").src
;
var num
= parseInt(path
.slice(-5, -4));
return num
;
}
function setPath(num
) {
document
.getElementById("picture").src
= './img/pic' + num
+ '.png';
}
</script
>
</head
>
<body
>
<img id
="picture" src
="./img/pic1.png"><br
>
<input type
="button" name
="" id
="buttion1" value
="第一张" onclick
="firstPic()" disabled
="disabled" />
<input type
="button" name
="" id
="buttion2" value
="上一张" onclick
="backPic()" disabled
="disabled" />
<input type
="button" name
="" id
="buttion3" value
="下一张" onclick
="nextPic()" />
<input type
="button" name
="" id
="buttion4" value
="最后一张" onclick
="lastPic()" />
</body
>
</html
>
Processed:
0.010, SQL:
8
