[无名弟子]JS-柳桐|2019年03月13日的日报-技能树.IT修真院

发表于： 2019-03-13 21:17:43

1 757

今天完成的事情：

1、今天详细学习了js的几种传参方式，理解的比较透彻，也学到了很多东西。

2、今天完成了一个任务四的页面，以下是今天所写的js代码视图：


var arr = sessionStorage.players;
players = JSON.parse(arr);
var str=sessionStorage.allDeads;
var allDeads=JSON.parse(str);
console.log(players);
console.log(allDeads)
var deads;

//取序号
$(function box() {
    for (var i=0; i<players.length; i++){
        if (players[i]=="杀手") {
            var div='<div class="box kill" >'+'<p>'+(i+1)+"号杀手"+'</p>'+'</div>';
            $(" .center").append(div);
        }else{
            var div='<div class="box" >'+'<p>'+(i+1)+"号玩家"+'</p>'+'</div>';
            $(" .center").append(div);
        }
    }

    for (var j = 0; j < allDeads.length; j++) {
        $(".box:eq("+allDeads[j]+")").addClass("deads")
    }


    $(".center div").click(function(){
        if($(this).hasClass("deads")){
            alert("不可杀死人")
        }else if(!$(this).hasClass("kill")){
            $(this).toggleClass("box-select")
                .siblings("div").removeClass("box-select")
            deads=sessionStorage.deads=$(".center div").index($(this));
        }else{
            alert("不可杀队友")
        }
    })
})
//状态机
/*var myState=new StateMachine({
})
*/
//进去投票页
document.getElementById('next').onclick=function(){
    allDeads.push(deads);
    var str1=allDeads;
    sessionStorage.allDeads=JSON.stringify(str1);
    // for (var i = 0; i < allDeads.length-1; i++) {
    // players.splice(allDeads[i],1);
    // }

    var shaShou=0;
    var pinMin=0;
    for (var j = 0; j <players.length; j++) {
        if (players[j]=="杀手") {shaShou++;}
        if (players[j]=="平民") {  pinMin++;}
    }
    for (var i = 0; i < allDeads.length; i++) {
        if (players[allDeads[i]]=="杀手") {
            shaShou--;
        }else {
            pinMin--;
        }
    }
    sessionStorage.shaShou=shaShou;
    sessionStorage.pinMin=pinMin;
    if (shaShou>pinMin) {
        alert("杀手胜利")
        sessionStorage.result="杀手";
        location.href="js2-8.html"
    }else if(shaShou==0){
        alert("平民胜利")
        sessionStorage.result="平民";
        location.href="js2-8.html"
    }else{
        location.href="js2-5.html"
    }
}

明天计划的事情：

1、首先明天开始换一种思路和学习方法，不再看那么多视频和代码，开始认真地自己扣代码，把该学的东西学扎实。还有就是调整好作息，晚上早点睡，让白天有个好精神。

2、从明天开始尝试老大所说的番茄工作法，把专注力提上去。

3、明天将继续做js任务2-4，任务快完成了，需要把最近所学到的东西和不懂的东西都整理出来，这样有助于接下来的任务。

遇到的问题：

1、首先就是今天在切图的时候把图片都切成了.html格式，在写代码的时候发现用不了，之后才找到之所以这样的原因，并重新切了一边图，解决了此问题。

2、在做任务的时候，以为发牌的部分需要写多个页面然后逐个跳转，后来问过师兄才知道，写一个页面就够了，然后利用jquery把所需要更改所需要变化的图片及文字就可以了，师兄还详细的给我讲了一遍实现这种方式的操作方法，学习到了很多之前不会的东西。

收获：

‍‍今天了解一下js有哪几种传参方式，那么首先问题来了，什么是传参呢？有的人可能会把这里的js传参方式，理解成js函数中的参数传递，但是呢，我们所要讲的是页面之间的数据传递，其实在以前传统的前端开发中，页面之间是很少有参数交互的，甚至是没有，然而而在如今的前端环境下，一个稍微正式点的项目都不可能少了页面间传参。而页面的跨越、服务器后台进行数据请求等，都需要一个或者多个传参的方法。那么参数在不同的页面间进行传递，一个页面的参数被另一页面使用，如何才能做到不同页面间进行参数传递呢？

‍‍在JS中有多种页面传递参数的方法有以下几种：‍‍

‍‍‍‍‍‍① URL‍‍

把参数值附在url后面传递到其他页面

② H5 web st‍‍orag‍‍e

localStroage 和 sessionStorage

③ Cookie‍‍

使用浏览器Cookie传递参数‍‍‍‍

④ Form 表单‍‍

Form表单通过URL传递参数‍‍‍‍‍‍‍‍

以下是我在网上搜集总结的一些各种传参方式的优缺点：

1、URL传参：优点：取值方便，可以跨域。缺点：值长度有限制。

2、H5 Web storage：优点：使用起来非常简单、方便。缺点：兼容性有点小问题。兼容性：现代浏览器（firefox safari chrome opera）都支持，IE8以下（不包括IE8）不支持。