JavaScript_Homework4

最新推荐文章于 2020-05-07 12:01:26 发布

qq_37777236

最新推荐文章于 2020-05-07 12:01:26 发布

阅读量510

点赞数

本文链接：https://blog.csdn.net/qq_37777236/article/details/80109035

版权

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;
}