2018-04-27

JavaScript_Homework4

JavaScript作业四 JavaScript编程应用

JavaScript作业四

【任务6-1】实现Q-Walking E&S后台模拟登录。

将后台主页修改为

	<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript">
		window.onload=function(){
			var flag=0;//保存用户状态（用户未登录）
			do{
				//使用数组保存用户名和密码
				var array=[["admin","admin"]];
				var userName = prompt("请输入用户名：");
				var userPwd = prompt("请输入密码：");
				for (var i=0; i<array.length; i++) {
					if (array[i][0]==userName&&array[i][1]==userPwd) {
						alert("用户登陆成功，欢迎<"+userName+">使用本系统!");
						//获取topFrame框架对应的页面中的class属性为”user”的元素，
						//然后再从中筛选<span>标签，最后修改标签中的内容
						topFrame.document.getElementsByClassName("user")[0]
						  .getElementsByTagName("span")[0].innerHTML=userName;
						flag=1;//用户登录成功
						break;
					}
					if(userName==null&&userPwd==null){
						flag=2;//用户取消登录
					}
				}
				if(flag==0){
					alert("用户名或密码错误，请重新登录。");
				}
			}while(flag==0);
		}
	</script>
	<frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0">
		<frame src="top.html"></frame>
		<frameset cols="187,*" frameborder="no" border="0" framespacing="0">
			<frame src="left.html"></frame>
			<frame src="shop_search.html"></frame>
		</frameset>
		
	</frameset>
<body>

</body>
</html>

【任务6-2】实现Q-Walking E&S购物列表页面的商品展示模块。

将购物列表页面的商品展示模块的html静态代码改为js动态生成

<div class="middle">
   <h1 class="pic_title">最新上架</h1>
   <div class="pic_list">
   <script type="text/javascript">
	var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg","yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];
	var prices=["198.00","69.00","160.00","210.00","70.00","146.00","69.00","239.00"];
	var buyers=[324,534,643,678,567,4567,1345,789];
	var contents=["冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣","2015夏新款韩版 透气舒适简约半截袖T恤衫","韩版甜美气质亮片热气球字母中长款圆领短袖T恤","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙","v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣","韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季"];
	
	for(var i=0;i<images.length;i++){
		var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]+"' /></div><dt><span class='price'>￥"+prices[i]
			+"元</span><span class='font12'>"+buyers[i]+"人购买</span></dt><dd>"
			+contents[i]+"</dd></dl>";
		document.write(goodsInfo);
	}
</script>
   </div>
   <!--品牌活动-->
   <h1 class="pic_title">品牌活动</h1>
   <ul class="pic_list2">
     <script type="text/javascript">
  	var images=["dress1.jpg","dress2.jpg","dress3.jpg","dress4.jpg"];
	var contents=["独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙","夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙","爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙","亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙"];
	for(var i in images){
		var goodsInfo="<li><img src='images/shopshow/"+images[i]+"' /><p>"
			+contents[i]+"</p></li>";
		document.write(goodsInfo);
	}
  </script>
   </ul>
 </div>

【任务7-1】实现购物导航页面中的图片轮播效果。

在购物导航页面添加轮播效果代码

<script type="text/javascript">
var sign = 2;
function showPic(index) {	
    var focusImg = document.getElementById("focusImg");	
    var imgSrc = "images/index/pic";
    imgSrc =imgSrc+ index + ".jpg";	
	focusImg.src = imgSrc;	
    var lis = document.getElementsByClassName("focusBox")[0].getElementsByTagName("li");    
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = "";
    }
    lis[index - 1].className = "cur";
}

function setCurrentPic() {//循环轮播 计数器
    showPic(sign);
    sign++;
    if (sign == 4) {
        sign = 1;
    }
}

window.onload = function () {//打开时为第一个图片
    showPic(1);
}

window.setInterval("setCurrentPic()",2000);//时间

</script>

【任务7-2】实现购物列表页面中的热门随机推荐。

右侧热门推荐改为js实现的动态效果


// Created by guoqy
//所有的推荐商品数据
var JSONData={
	name:"热门推荐",
	srcPath:"images/shopshow/",
	data:[{href:"#",src:"s1.jpg",price:56.00},
		{href:"#",src:"s2.jpg",price:97.00},
		{href:"#",src:"s3.jpg",price:89.00},
		{href:"#",src:"s4.jpg",price:69.00},
		{href:"#",src:"s5.jpg",price:35.00},
		{href:"#",src:"s6.jpg",price:18.00},
		{href:"#",src:"s7.jpg",price:76.00},
		{href:"#",src:"s8.jpg",price:82.00},
		{href:"#",src:"s9.jpg",price:60.00},
		{href:"#",src:"yifu1.jpg",price:45.00},
		{href:"#",src:"yifu2.jpg",price:92.00},
		{href:"#",src:"yifu3.jpg",price:16.00},
		{href:"#",src:"yifu4.jpg",price:42.00},
		{href:"#",src:"yifu5.jpg",price:79.00}]
};
//指定窗口加载完毕时，调用的函数
window.onload=function(){
	var adviseContent='<h1 class="notice_title">'
		+JSONData.name+'</h1><ul class="pic_list3">';
	var turnShow=getRandomNum(9,0,14);
	for(var i=0;i<turnShow.length;i++){
		var index=turnShow[i];
		adviseContent=adviseContent+'<li><a href="'+JSONData.data[index].href
				+'"><img src="'+JSONData.srcPath+JSONData.data[index].src
				+'" width="80" height="80"/></a><p class="price2">￥'
				+JSONData.data[index].price+'元</p></li>';
	}
	adviseContent=adviseContent+'</ul>';
	document.getElementsByClassName("right_nav")[0].innerHTML=adviseContent;
};
//设置定时器，定时更新热门推荐信息
window.setInterval("showHotAdvise()",2000);
//显示热门推荐信息
function showHotAdvise(){
	var adviseContent='<h1 class="notice_title">'
		+JSONData.name+'</h1><ul class="pic_list3">';
	var turnShow=getRandomNum(9,0,14);
	for(var i=0;i<turnShow.length;i++){
		var index=turnShow[i];
		adviseContent=adviseContent+'<li><a href="'+JSONData.data[index].href
				+'"><img src="'+JSONData.srcPath+JSONData.data[index].src
				+'" width="80" height="80"/></a><p class="price2">￥'
				+JSONData.data[index].price+'元</p></li>';
	}
	adviseContent=adviseContent+'</ul>';
	document.getElementsByClassName("right_nav")[0].innerHTML=adviseContent;
}
//返回num个不重复的随机数,范围在minNum~maxNum之间
function getRandomNum(num,minNum,maxNum){
	var array=new Array();
	for(var i=0;i<num;i++){
		do{
			var randomNum=Math.floor(Math.random()*maxNum+minNum);
			if(!checkNum(array,randomNum)){
				array.push(randomNum);
				break;
			}
		}while(true);
	}
	return array;
}
//数组array中包含num时返回true；否则返回false
function checkNum(array,num){
	for(var i=0;i<array.length;i++){
		if(array[i]==num){
			return true;
		}
	}
	return false;
}

本文标题:JavaScript_Homework4

文章作者:mao

发布时间:2018-04-27, 15:33:00

最后更新:2018-05-08, 23:18:24

原始链接:https://maojinkang.github.io/2018/04/27/JavaScript_Homework4/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。