这周系里安排了企业实训，该企业是北京金源万博公司，旗下两个子公司一个是开发接项目的，一个是IT培训的。这两天给我们上课的是开发部的一个技术人员。他这两天给我们主要讲的是web前端的设计。下面来和大家分享一下这两天的收获。
任务一：点击标题，使隐藏内容下滑出现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>廊坊师范学院</title>
<meta name="description" content="廊坊师范学院计算机系"/>
<meta name="keywords" content="廊坊，计算机，廊坊师范学院"/>
<style>
div{width:400px;margin:0 auto; border:1px solid #ddd;padding:10px;}
h3{font-size:16px;cursor:pointer;}
p{font-size:14px;display:none;}
</style>
</head>
<body>
<div>
<h3>学习WEB前端需要什么基础吗？</h3>
<p>不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。 不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。
</p>
</div>
<script type="text/javascript" src="j.js"></script>
<script>
$('h3').click(function(){
$('p').slideDown(700);// slow normal fast time
})
</script>
</body>
</html>
这里其实没什么，就是一些布局，他的特效实现关键在于使用了JavaScript包中的slidedown（）这个方法。
效果：
通过这次任务，学会了初级的Html代码，里面是一个简单的css+div+js的代码，比较容易理解。在实现特效的同时，也体会到js的强大，如果没有js的加密文件，要多出很多倍的代码才能完成这个任务。
任务二、点击文字链接，以淡入效果出现弹出层；点击关闭按钮，弹出层以淡出效果消失。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style>
div.country{width:613px;margin:0 auto;position:absolute; top:50%; margin-top:-270px;left:50%;margin-left:-306px;z-index:3; display:none;}
.close{background:url(images/fancybox.png) no-repeat -42px 0px;display:block; width:30px; height:30px;position:absolute;top:-10px;right:-10px;z-index:3;}
.middle{position:absolute;width:100%;height:100%;background:#000;top:0px;left:0px;filter:alpha(opacity=30);opacity:0.3;z-index:2;display:none;}
</style>
</head>
<body>
<a href="#" id="select_country">Select Country</a>
<div class="country">
<a href="javascript:;" class="close"></a>
<img src="images/countries.png" width="613" height="541" alt="country" />
</div>
<div class="middle"></div>
<script type="text/javascript" src="j.js"></script>
<script>
$('.middle').height($(window).height()).css('opacity','0.3')
$('#select_country').click(function(){
$('.middle').fadeIn(700);
$('.country').fadeIn(1000);
return false;
})
$('.close').click(function(){
$('.middle').fadeOut(800);
$('.country').fadeOut(700);
})
</script>
</body>
</html>
效果：
这个任务中将整个页面用三个DIV分成三层，并通过添加超链接来加载本地的图片来设计界面，包括图片的居中、绝对位置等，它拥有更加复杂的css样式，而且通过调用JavaScript文件中的淡入淡出的特效使效果做的很绚丽。
任务三、通过阿贾克斯检测用户名是否存在
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
</head>
<body>
<form method="POST" action="">
<table>
<tr>
<td>账号:</td>
<td><input type="text" name="username" id="username" /></td>
<td id="user_info">账号由5-20位数字、字母、下划线组成、以字母开头</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password" /></td>
<td id="pwd_info"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="register" value="注册" />
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="j.js"></script>
<script>
$('#username').blur(function(){
var user = $(this).val(); // 获取用户输入的账号
if(user.match(/^\s*$/))
{
$('#user_info').html('账号不能为空');
return false;
}
if(!user.match(/^[a-zA-Z]\w{4,19}$/))
{
$('#user_info').html('账号格式不正确');
return false;
}
$.get('users.html',{k:Math.random()},function(result){
if(result == 0)
{
$('#user_info').html('该用户已经被注册~请换一个吧');
return false;
}
else if(result == 1)
{
$('#user_info').html('恭喜！~该用户可以注册');
return false;
}
else
{
alert(result);
}
})
})
</script>
</body>
</html>
效果：
该任务通过调用JavaScript文件中的方法（如下）实现对HTML，PHP，等文件的读取。
$.get(‘users.html‘,{k:Math.random()},function(result){
if(result == 0)
{
$(‘#user_info‘).html(‘该用户已经被注册~请换一个吧‘);
return false;
}
else if(result == 1)
{
$(‘#user_info‘).html(‘恭喜！~该用户可以注册‘);
return false;
}
else
{
alert(result);
}
})
还有一点特别说明的是今天接触了正则表达式，这里就不细说了。大家点击自己可以了解一下，很有意思的知识。
时间： 2024-10-13 00:59:04