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在使用时,搭配有後台资料库去渲染的效果会更好
这边因为内容较少,下次如果有写到较多资料的应该会更有感觉

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


<<:  【从实作学习ASP.NET Core】Day05 | Model 模型

>>:  Day 02 : Fibonacci 斐波那契

Day28 - 轻前端 Component - 多个 jQuery UI Selectmenu 连动

这篇套用并调整 Day26 的 jQuery UI Selectmenu Vue Component...

【Day 27】情境模拟:该如何协助设计师,提供可以执行的设计稿 !?

要注意什麽,才能更顺利地提供可执行的设计稿 !? 一、参考热门的设计框架、典范大厂的 Web 框架或...

自动化测试,让你上班拥有一杯咖啡的时间 | Day 10 - 如何产生测试报告

此系列文章会同步发文到个人部落格,有兴趣的读者可以前往观看喔。 执行完测试脚本後,不仅会有截图和影...

终章 - 资安碎碎念与心得

终章 - 资安碎碎念与心得 其实原本还有很多想打的鬼故事, 但碍於尺度与很难去识别化,最後还是觉得不...

小菜鸡学程序!用 Golang 来跟世界说 Hello 吧!

这系列文章会用 Golang 来做说明,希望可以用比较简单、直白的方式来说明一些程序的概念,让没有基...