[郑州|结业弟子]JS-张雄|2020年01月20日的日报-技能树.IT修真院

发表于： 2020-01-20 22:17:38

0 1167

今天完成的事

1，js任务2，3总结：

2，为任务2~4添加其他跳转；为整个任务加上首页界面，以及为任务代码插入更清晰的注释；

3，模板字符串的学习；尤其是${ }的学习；

明天的计划

1，任务四总结；

2，开始任务五的前期学习准备；

遇到的问题

暂无

收获

1，模板字符串的学习使用；

一般连接非数值与数值用的是 “+”号来连接，字符串之间连接也是使用 + 号；

var a = 5;

var b = 10;

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

// "Fifteen is 15 and// not 20."

而现在可以在${ }中直接使用表达式，同时使用它代替比如【+ Number +】所加数值两边都要加 + 号的繁琐，可以看到使用${ }后，操作也变得

更加简洁明了；

var a = 5;

var b = 10;

console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);

// "Fifteen is 15 and// not 20."

当然还有【` `】的使用可以在特殊需要时将一大段html片段直接插入文档中；如果使用一个个创建元素再为其添加相应的属性，可以预知会非常麻烦，模板字符串无疑是一个极好的工具；

function addNew() {
            for (let i=0; i < data; i++) {
            $(".start-process").eq(i).hide();
            $(".start-sign-box").eq(i).hide();
        
            $(".main-game").append(`
            <div class="main-start">
                <div class="start-day"></div>
                <div class="start-sign-box">
                    <div class="start-sign"></div>
                </div>
                <div class="start-process">
                    <div class="process-box">
                        <div class="process-one process-triangle">
                            <img src="image/moon.png">
                            <div>杀手杀人</div>
                        </div>
                        <div class="mt20 message-night"></div>
                        <div class="process-two process-triangle">
                            <img src="image/sun.png">
                            <div>亡灵发表遗言</div >
                        </div>
                        <div class="process-three process-triangle">玩家依次发言</div>
                        <div class="process-four process-triangle">全民投票</div>
                        <div class="mt20 message-daytime"></div>
                    </div>
                </div>
            </div>`);
            $(".start-day").eq(data).text("第" + (data+1) + "天");
        }
          
}

可以直接将

$(".start-day").eq(data).text("第" + (data+1) + "天");

改为，可以看到更加直观，简洁；

 <div class="start-day">第 ${data+1} 天</div>

返回列表

【任务11】 [郑州|结业弟子]JS-张雄 | 2020年01月20日 的日报

评论

分享到

【任务11】 [郑州|结业弟子]JS-张雄 | 2020年01月20日的日报