Day2-为小学生撰写的网站小游戏_template精简程序码

昨天写的小网站後续看文章时觉得有一部分JS有硬干的嫌疑(?)
所以把一些部分做了改动

首先使用了HTML 的 template元素
将预想使用的程序码写入template中
我要使用的程序码是

<img src="IMG_HERE" class="key" id="KEY_HERE" style="z-index: Z_HERE;">

会需要被改动的地方统一用"英文命名"+"_HERE"做标记，JS替换时会比较容易找
各自作用在写JS时再介绍，放入template後长这样

<template id="template01" style="display: none;">
    <img src="IMG_HERE" class="key" id="KEY_HERE" style="z-index: Z_HERE;">
</template>

因为这边昨天已经写好CSS相关内容了就直接设定看不见，若是还没写CSS的话可以先写好CSS再加上display:none做隐藏

HTML加入这行後CSS不用做更动，直接去到JS
昨天的程序码是把所有button分开来写JS，今天直接使用for回圈把同性质的一起写了
首先是甜筒的部分

for (let i = 1; i <= 5; i++) {
    let tmp = $('#template01');
    $("#addItem_" + i).click(function () {
        let div = tmp.html();
        div = div.replace("IMG_HERE", "https://raw.githubusercontent.com/sweetyue9045/little_game/main/img/0_" + i + ".png");
        div = div.replace("KEY_HERE", "");
        div = div.replace("Z_HERE", "0");
        $("#showBlock").prepend(div);
    })
}

昨天忘了提到图片使用网址是因为之前上传github时图片网址有跑掉的问题，所以後来改成放入github上传後的网址
KEY_HERE是要给甜筒做使用的，先跳过
因为甜筒永远是最後一个所以这边就直接把z-index设成0
控制按钮的disabled比较冗长这边就不贴了，反正五个甜筒是一样的设定

接下来是冰淇淋

for (let i = 1; i <= 9; i++) {
    let tmp = $('#template01');
    $("#add-" + i).click(function () {
        txtId++
        let div = tmp.html();
        div = div.replace("IMG_HERE", "https://raw.githubusercontent.com/sweetyue9045/little_game/main/img/" + i + ".png");
        div = div.replace("KEY_HERE", "key"+txtId);
        div = div.replace("Z_HERE", txtId);
        $("#showBlock").prepend(div);
        $("#del").attr("disabled", false);
    })
}

这边的KEY_HERE就有放入内容了
txtId是我用来记录目前有多少冰淇淋的变数
把txtId加入每个冰淇淋的ID之中，让冰淇淋的ID都不同，删除按钮的主要函式remove才能顺利被使用
而Z_HERE是为了让上层冰淇淋的图层比较高，没什麽原因，就比较好看

.
使用for回圈加上template之後JS程序码变得十分整洁
这边我所使用的程序码较短可能比较没感觉，但如果需要新增的程序码很长的话就会有很明显的差别了

Template在JS中的用法主要是几段程序码

let tmp = $('#template01');

先抓取设定的template内容

let div = tmp.html();

然後存取下来方便後面使用

div = div.replace("IMG_HERE", "https://raw.githubusercontent.com/sweetyue9045/little_game/main/img/" + i + ".png");
div = div.replace("KEY_HERE", "key"+txtId);
div = div.replace("Z_HERE", txtId);

这边将抓取内容中我们设定的「关键字」替换成我们要使用的东西

$("#showBlock").prepend(div);

最後一样是加入在div中

template在使用时，搭配有後台资料库去渲染的效果会更好
这边因为内容较少，下次如果有写到较多资料的应该会更有感觉

今天的每日写网站就到这边吧，来想明天要干嘛了