企业实训收获之--web前端设计

最新推荐文章于 2023-01-27 19:55:42 发布

AstroCsdn博客

最新推荐文章于 2023-01-27 19:55:42 发布

阅读量1.8k

点赞数 1

分类专栏：机房收费

本文链接：https://blog.csdn.net/liubingkai1314/article/details/45954559

版权

机房收费专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这周系里安排了企业实训，该企业是北京金源万博公司，旗下两个子公司一个是开发接项目的，一个是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);

}

})

还有一点特别说明的是今天接触了正则表达式，这里就不细说了。大家点击自己可以了解一下，很有意思的知识。

AstroCsdn博客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
28
评论
企业实训收获之--web前端设计

这周系里安排了企业实训，该企业是北京金源万博公司，旗下两个子公司一个是开发接项目的，一个是IT培训的。这两天给我们上课的是开发部的一个技术人员。他这两天给我们主要讲的是web前端的设计。下面来和大家分享一下这两天的收获。任务一：点击标题，使隐藏内容下滑出现。廊坊师范学院 div{width:400px;margin:0 auto; border:1px soli
复制链接

扫一扫