发表于: 2019-03-26 22:02:12

2 672


今天完成的事情,取出浏览器的值,用模板字符串渲染出div。


var get = JSON.parse(sessionStorage.getItem("list"));
console.log(get);


在取浏览器贮存的值的时候,浏览器存入的对象无法取出来。

我在浏览器里面存入了一个叫list的值,但是只取出来了$list;,对象保存的值取不出来。

var test=sessionStorage.getItem($list);

后面师兄让我看了一下JSON,用josn取出对象值。




var arr = Object.keys(get);
var z = "";
//创建一个函数
function box() {
   //id选择器使用。
   for (let i = 0; i < arr.length; i++) {
       let div = (`<div class="game-box" id="${i}"><div class="role">${get[i]}</div>
<div class="number">${i}${z}</div></div>`
       );
       // console.log(div);
       document.main.appendChild(div);
   }
}


首先把对象转为为,数组,因为对象没有长度,for循环我不好去判断它。

创建函数,var z=“号";


进行for循环,i等于0,在i小于数组长度的时候,自增。

创建div,给div,定义class,id选择器命名。方便使用。在模板字符串中使用变量的格式是${var};


模板字符串里面,空格也是字符串的一种,但是在模板字符串中,有着清除的嵌套层级。


       let div = (`<div class="game-box" id="${i}">

                   <div class="role">${get[i]}</div>

                   <div class="number">${i}${z}</div>

           </div>`

game-box是父级,而role,与number是平级。



模板字符串比起之前的字符串使用上面方便了太多了。我稍微写了一点原生。。

创建一个div
var newdiv=function () {
   //创建父级div
 var parentdiv=$("<div></div>");
 parentdiv.attr("id,game");
 parentdiv.addClass("game-box")
};
console.log(newdiv);


创建div,去给div命名id选择器,类选择器,接下来还需要一串串的代码。。



今天遇到的问题,玩家的div,我创建完了,但是想不到特别号的办法去输出进body里。百度描述如何去给js 动态div写入html。没有太大的收获,翻了知乎上,看到了一个例子试了一下,没有成功。这是一串往body里面div的代码。应该是节点操作。

document.main.appendChild(div);


dom操作body节点,至少我也有了一个方向。知道是那方面的问题。




收获,学会如何使用模板字符串,初步了解josn。如何使用josn操作对象,浏览器存值,取值。


反省,感觉看字符串的文档浪费了太久时间了,看了很长时间都不知道如何上手。


明天计划,把几个盒子渲染出来,


返回列表 返回列表
评论

    分享到