JavaScript——练习题（3）
程序员文章站
2024-03-15 23:25:48
...
一、做邮箱为空判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
a:hover{
color: red;
}
</style>
<script>
function checkemail(){
var email = document.getElementById("email").value;
if(email.length==0){
alert("邮箱不能为空！！！");
return false;
}
if(email.indexOf("@")==-1){
alert("邮箱必须包含@！！！");
return false;
}
if(email.indexOf(".")==-1){
alert("邮箱必须包含.！！！");
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<form action="">
<table>
<tr>
<td style="text-align: right;font-size: 12px;">会员名：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td style="text-align: right;font-size: 12px;">密码：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td style="text-align: right;font-size: 12px;">邮箱：</td>
<td>
<input type="text" id="email"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<input type="image" src="img/QQ截图20200921155250.png" height="18px" onclick="checkemail()"/>
<a href="" style="font-size: 12px;">免费注册</a>
</div>
</body>
</html>
二、背景图片转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
background-image: url(img/h_bg.jpg);
width: 1000px;
height: 130px;
background-repeat: no-repeat;
}
li{
list-style: none;
float: left;
font-size: 14px;
}
#headermenu{
padding-top: 1px;
padding-left: 500px;
width: 500px;
height: 39px;
color: black;
float:right;
}
#onemenu{
width: 100%px;
height: 55px;
color: white;
line-height: 55px;
clear: both;
}
#wellcomemenu{
padding-top: 14px;
padding-left: 350px;
width: 580px;
height: 33px;
color: black;
float:right;
}
.c1{
padding:0px;
margin: 0px;
width: 50px;
height: 40px;
list-style: none;
line-height: 40px;
float: left;
}
.foot{
font-weight: bold;
padding-left:5px;
text-align: center;
}
.foot1{
font-weight: bold;
padding-left:35px;
text-align: center;
}
.foot2{
font-weight: bold;
padding-left:30px;
text-align: center;
}
#foot3{
font-weight: bold;
padding-left:30px;
text-align: center;
}
.car{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 28px;
height: 20px;
}
.help{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -40px 0px;
width: 28px;
height: 25px;
}
.help1{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -80px 0px;
width: 28px;
height: 25px;
}
.help2{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -125px 0px;
width: 28px;
height: 25px;
}
.login{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px -26px;
width: 50px;
height: 25px;
padding-left: 7px;
}
.over{
background-image: url(img/nav_bg.gif);
}
.out{
background-image: url(img/h_bg.jpg);
}
</style>
<script>
function init(){
var liObjects=document.getElementById("onemenu");
for(var i=0;i<liObjects.length;i++){
liObjects[i].onmouseover=function(){
this.className='over';
}
liObjects[i].onmouseout=function(){
this.className='out';
}
}
}
</script>
</head>
<body onload="init()">
<div id="container">
<div id="headermenu">
<ul>
<li class="car"> </li>
<li>购物车</li>
<li class="help"> </li>
<li>帮助中心</li>
<li class="help1"></li>
<li>加入收藏</li>
<li class="help2"></li>
<li>设为首页</li>
<li> </li>
<li class="login">登陆</li>
<li class="login">注册</li>
</ul>
</div>
<div id="wellcomemenu">
你好，欢迎访问贵美商城！2009年9月30日17点15分
</div>
<div id="onemenu">
<ul>
<li class="foot" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">首 页</li>
<li class="foot1" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">家用电器</li>
<li class="foot1" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">手机数码</li>
<li class="foot2" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">日用百货</li>
<li id="foot3" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">书 籍</li>
<li class="foot2" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">帮助中心</li>
<li class="foot2" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">免费开店</li>
<li class="foot2" onmouseover="this.style.backgroundImage='url(img/nav_bg.gif)'" onmouseout="this.style.backgroundImage='url(img/yuan.png)'">全球咨询</li>
</ul>
</div>
</div>
</body>
</html>
三、随页面移动的广告图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
margin: 20px auto;
text-align: center;
}
.adv{
position: absolute;
left: 350px;
top: 200px;
z-index: 2;
}
.close{
position: absolute;
left: 447px;
top: 200px;
z-index: 3;
}
</style>
<script>
var advTop;//广告距离顶部距离
var advLeft;//广告距离左边距离
var advObject;//获得广告对象
var closeTop;//关闭按钮距离顶部距离
var closeLeft;//关闭按钮距离左边距离
var closeObject;//获得关闭按钮对象
//获取广告和关闭按钮距离顶部和左部的距离
function init(){
advObject=document.getElementById("d2");
closeObject=document.getElementById("d3");
if(advObject.currentStyle){
advTop=parseInt(advObject.currentStyle.top);
closeTop=parseInt(closeObject.currentStyle.top);
advLeft=parseInt(advObject.currentStyle.left);
closeLeft=parseInt(closeObject.currentStyle.left);
}else{
advTop=parseInt(document.defaultView.getComputedStyle(advObject,null).top);
advLeft=parseInt(document.defaultView.getComputedStyle(advObject,null).left);
closeTop=parseInt(document.defaultView.getComputedStyle(closeObject,null).top);
closeLeft=parseInt(document.defaultView.getComputedStyle(closeObject,null).left);
}
}
//获取滚动条移动的距离，并重新设置广告位置
function move(){
advObject.style.top=advTop+parseInt(document.documentElement.scrollTop)+"px";
advObject.style.left=advLeft+parseInt(document.documentElement.scrollLeft)+"px";
closeObject.style.top=closeTop+parseInt(document.documentElement.scrollTop)+"px";
closeObject.style.left=closeLeft+parseInt(document.documentElement.scrollLeft)+"px";
}
function display(){
var imgadv = document.getElementById("d2");
var imgclose = document.getElementById("d3");
imgadv.style.display="none";
imgclose.style.display="none";
}
window.onload=init;
window.onscroll=move;
</script>
</head>
<body>
<div id="d1">
<img src="img/adv.jpg" class="adv" id="d2"/><br />
<img src="img/close.jpg" class="close" id="d3" onclick="display()"/>
<img src="img/main1.JPG" /><br />
<img src="img/main2.JPG" /><br />
<img src="img/main3.JPG" /><br />
</div>
</body>
</html>
四、邮箱判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城注册</title>
<script>
function checkemail(){
var email = document.getElementById("email").value;
if(email.length==0){
alert("邮箱不能为空！！！");
return false;
}
if(email.indexOf("@")==-1){
alert("邮箱必须包含@！！！");
return false;
}
if(email.indexOf(".")==-1){
alert("邮箱必须包含.！！！");
return false;
}
return true;
}
</script>
</head>
<body>
<form >
<table border="0">
<tr>
<td>登陆名：</td>
<td><input type="text" size="10" />(可包含0-9，a-z和下划线)</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" size="10" min="6"/>(至少包含6个字符)</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" size="10" /></td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type="text" size="10" min="6" id="email"/>(必须包含@字符)</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/><img src="img/Male.gif" />男
<input type="radio" name="sex" /><img src="img/Female.gif" />女
</td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="files" /></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" checked="checked"/>运动
<input type="checkbox" name="hobby" />聊天
<input type="checkbox" name="hobby" />玩游戏
</td>
</tr>
<tr>
<td>
<input type="image" src="img/submit.gif" onclick="checkemail()"/>
<input type="image" src="img/reset.gif" />
</td>
</tr>
</table>
</form>
</body>
</html>
五、邮箱与姓名的判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城注册</title>
<script>
function checkusername(){
var username=document.getElementById("username").value;
for(var i=0;i<username.length;i++){
if(username.substring(i,i+1)>0){
alert("姓名不能包含数字！！！");
return false;
}
if(username.length==0){
alert("姓名不能为空");
return false;
}
}
return true;
}
function checkname(){
var name=document.getElementById("name").value;
for(var i=0;i<name.length;i++){
if(name.substring(i,i+1)>0){
alert("姓名不能包含数字！！！");
return false;
}
if(name.length==0){
alert("姓名不能为空");
return false;
}
}
return true;
}
function checkemail(){
var email = document.getElementById("email").value;
if(email.length==0){
alert("邮箱不能为空！！！");
return false;
}
if(email.indexOf("@")==-1){
alert("邮箱必须包含@！！！");
return false;
}
if(email.indexOf(".")==-1){
alert("邮箱必须包含.！！！");
return false;
}
return true;
}
function fun(){
if(checkname()&&checkusername()&&checkemail()){
return true;
}
return false;
}
</script>
</head>
<body>
<form >
<table border="0">
<tr>
<td>姓名：</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>姓氏：</td>
<td>
<input type="text" id="name"/>
</td>
</tr>
<tr>
<td>登陆名：</td>
<td><input type="text" size="10" />(可包含0-9，a-z和下划线)</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" size="10" min="6"/>(至少包含6个字符)</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" size="10" /></td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type="text" size="10" min="6" id="email"/>(必须包含@字符)</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/><img src="img/Male.gif" />男
<input type="radio" name="sex" /><img src="img/Female.gif" />女
</td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="files" /></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" checked="checked"/>运动
<input type="checkbox" name="hobby" />聊天
<input type="checkbox" name="hobby" />玩游戏
</td>
</tr>
<tr>
<td>
<input type="image" src="img/submit.gif" onclick="fun()"/>
<input type="image" src="img/reset.gif" />
</td>
</tr>
</table>
</form>
</body>
</html>
六、信息验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城注册</title>
<style>
.red{
color: red;
}
</style>
<script>
function checkusername(){
var username=document.getElementById("username").value;
document.getElementById("usernamediv").innerHTML="";
for(var i=0;i<username.length;i++){
if(username.substring(i,i+1)>0){
document.getElementById("usernamediv").innerHTML="名字中不能包含数字";
document.getElementById("username").focus();
return false;
}
}
return true;
}
function checkname(){
var name=document.getElementById("name").value;
document.getElementById("nameDiv").innerHTML="";
if(name.length==0){
document.getElementById("nameDiv").innerHTML="姓氏不能为空";
return false;
}
return true;
}
function checkpassword(){
var pass=document.getElementById("password").value;
document.getElementById("passworddiv").innerHTML="";
if(pass.length<6){
document.getElementById("passworddiv").innerHTML="密码必须大于或等于6位";
return false;
}
return true;
}
function checkrepassword(){
var repass=document.getElementById("repassword").value;
var pass=document.getElementById("password").value;
document.getElementById("repassworddiv").innerHTML="";
if(repass!=pass){
document.getElementById("repassworddiv").innerHTML="两次密码不一致";
return false;
}
return true;
}
function checkemail(){
var email = document.getElementById("email").value;
document.getElementById("emaildiv").innerHTML="";
if(email.length==0){
document.getElementById("emaildiv").innerHTML="邮箱不能为空！！！";
return false;
}
if(email.indexOf("@")==-1){
document.getElementById("emaildiv").innerHTML="邮箱格式不正确，必须包含@！！！";
return false;
}
if(email.indexOf(".")==-1){
document.getElementById("emaildiv").innerHTML="邮箱格式不正确，必须包含.！！！";
return false;
}
return true;
}
function fun(){
if(checkusername()&&checkname()&&checkpassword()&&checkrepassword()&&checkemail()){
return true;
}
return false;
}
</script>
</head>
<body onsubmit="return fun()">
<form>
<table border="0">
<tr>
<td>姓名：</td>
<td>
<input type="text" id="username" onblur="checkusername()"/>
</td>
<td>
<div class="red" id="usernamediv"></div>
</td>
</tr>
<tr>
<td>姓氏：</td>
<td>
<input type="text" id="name" onblur="checkname()"/>
</td>
<td>
<div class="red" id="nameDiv"></div>
</td>
</tr>
<tr>
<td>登陆名：</td>
<td><input type="text" size="10" id="loginName"/>(可包含0-9，a-z和下划线)</td>
<td>
<div class="red" id="loginNmaediv"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" size="10" min="6" id="password" onblur="checkpassword()"/>(至少包含6个字符)</td>
<td>
<div class="red" id="passworddiv"></div>
</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" size="10" id="repassword" onblur="checkrepassword()"/></td>
<td>
<div class="red" id="repassworddiv"></div>
</td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type="text" size="10" min="6" id="email" onblur="checkemail()"/>(必须包含@字符)</td>
<td>
<div class="red" id="emaildiv"></div>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/><img src="img/Male.gif" />男
<input type="radio" name="sex" /><img src="img/Female.gif" />女
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
以上是关于JavaScript的练习题，如有错误请指正。
上一篇： C 蛇形数组