发表于: 2020-05-13 23:15:58

1 1974


一,完成内容

js-任务三

使用使用工具:JQUERY库

操作逻辑

1.将页面二所储存洗牌后生成的数组数据在页面三中提取

   使用知识点:localstorage本地永久储存中的getItem("")

                       方法,提取为字符串类型,然后再使用

                       split(",")方法将字符串类型转化成数组。

2.查看玩家身份

   步骤:1》先为玩家身份添加按钮点击事件

             2》根据点击过程切换显示和隐藏来查看并传递玩家身份

                 *(主要思路为判断点击数为奇数或偶数来显示和隐藏文本内容)

             3》查看到最后当切换时超出玩家数将显示为法官查看

                   并为按钮添加跳转新页面的点击事件

   使用知识点:*加载执行函数$(document).ready()

                       *点击事件click()

                       * 切换显示和隐藏方法toggle()

                       * 显示方法show()

                       * 隐藏方法hide()

                       * 捕获文本内容text()

                       * if ..... (else if)判断语句

3.查看完毕点击按钮跳转到新页面将展示所有玩家身份

   步骤:1》在新页面提取数组

             2》使用遍历排列数组

             3》创建盒子元素对应数组,然后添加到对应的父元素中

   使用知识点: *加载执行函数$(document).ready()

                        *localstorage本地永久储存中的getItem("")

                         方法,提取为字符串类型,然后再使用

                          split(",")方法将字符串类型转化成数组。

                        *创建元素$("<>标签</>")

                        *添加类样式addClass()

                        * 捕获文本内容text()

                        *添加元素append()

                        *遍历each(对象,function(下标,内容){})


     $(document).ready(function(){
            var getArr= localStorage.getItem("arr");//提取玩家数据字符串
            var Arr=getArr.split(",");//转换成数组
            var a=0;//初始值→点击次数
            var b=0;//初始值→获取数组下标索引
            $(".main-dbl").hide();//初始状态隐藏玩家内容
            $(".btn").click(function(){ 
                //判断点击次数为偶数显示状态 
                if(a%1==0){
                   $(this).text("隐藏并传递给"+(b+2)+"号");//替换按钮文本
                   $(".main-ico").hide();//隐藏
                   $(".main-dbl").show();//显示
                   $("h3").text(Arr[b]);//获取下标对应内容
                   b+=1;//当点击次数为偶数时传递一次
                   a+=0.5;//每点击两次递增一次数字
                }
                //判断点击次数为奇数显示状态 
                else if(a!=0){
                    $(this).text("查看"+(b+1)+"号身份");//替换按钮文本
                    $(".main-ico").show();//显示
                    $(".main-dbl").hide();//隐藏
                    $("h3").text(Arr[b]);//获取下标对应内容
                    $(".main-num").text(b+1);//显示框标记
                    a+=0.5;//每点击两次递增一次数字
                }
                //判断当下标超出数组长度时触发事件
                if(b>Arr.length-1) {
                    $(".main-num").text(b);//显示框标记
                    $(this).text("法官查看");//替换按钮文本
                    //跳转新页面点击事件
                    $(this).click(function(){
                        window.location.href="task2-4.html";
                    })
                }
            })
        })

新页面添加元素

  $(document).ready(function(){
            var Arr=localStorage.getItem("arr");
            var arr=Arr.split(",");
            $.each(arr,function(i,box){
                var box1=$("<div></div>").addClass("div1");
                var box2=$("<div></div>").addClass("div2");
                box1.text(box);
                box2.text((i+1)+"号");
                var box=$("<div></div>").addClass("div").append(box1).append(box2);
                $(".main").append(box);
            })
        })

二.明天收尾任务三,继续学习JQuery


返回列表 返回列表
评论

    分享到