如何在TPL文件中使用JavaScript使代码内容显示在页面？

核心问题分析 #

你的代码虽然生成了统计内容的page变量，但没有将这个变量的内容插入到页面的DOM结构中，这是页面无显示的直接原因。另外原代码的日期计算逻辑存在分支覆盖错误，会导致统计结果不准确甚至异常。

修复后的完整代码（适配TPL模板） #

首先在TPL模板里准备一个用于显示统计内容的容器：

<div id="site-running-time"></div>

然后将修复后的JS代码用模板要求的标签包裹（以Smarty为例，用{literal}）：

{literal}
<script type='text/javascript'>
// 初始化起始日期（注意：JS月份从0开始，4月对应3）
const startDate = new Date(2021, 3, 7);
const today = new Date();

// 计算时间差并转换为天
const diffTime = today - startDate;
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

// 转换为年、月、日（按平均每月30.44天计算）
let years = Math.floor(diffDays / 365);
let remainingDays = diffDays % 365;
let months = Math.floor(remainingDays / 30.44);
remainingDays = Math.floor(remainingDays % 30.44);

// 德语月份名称数组
const monthNames = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];

// 构建显示内容
let page = `<b><center>${today.getDate()}. ${monthNames[today.getMonth()]} ${today.getFullYear()}.</b><br><br></center>`;
page += `<b><center>Eröffnung </b><br> ${startDate.getDate()}. ${monthNames[startDate.getMonth()]} ${startDate.getFullYear()}</center><br>`;
page += `<center><b>Forum online seit...</b><br> `;

// 处理德语单复数
if (years === 1) {
    page += `${years} Jahr, `;
} else if (years > 0) {
    page += `${years} Jahre, `;
}

if (months === 1) {
    page += `${months} Monat und `;
} else if (months > 0) {
    page += `${months} Monate und `;
}

if (remainingDays === 1) {
    page += `${remainingDays} Tag</b>.`;
} else {
    page += `${remainingDays} Tage</b>.`;
}

// 将内容插入到DOM容器（核心显示逻辑）
document.getElementById('site-running-time').innerHTML = page;
</script>
{/literal}

关键修复说明 #

• DOM插入逻辑：新增document.getElementById('site-running-time').innerHTML = page;，把生成的统计内容插入到预先准备的容器中，这是让内容显示的核心步骤。
• 简化日期计算：原代码的日期判断逻辑复杂且存在分支覆盖错误（如if (bMonth <= tMonth)后直接覆盖计算结果，无else分支），改用时间戳差值计算更简洁准确。
• 修复月份索引：JS的Date对象月份从0开始，原代码直接用4对应4月会导致日期初始化错误，已修正为new Date(2021, 3, 7)。
• 优化单复数判断：移除原代码中多余的parseInt(tensYear+onesYear)写法，直接用数值判断单复数，同时处理了年/月/日为0的情况（如网站运行不满1年时不显示年数）。

TPL模板注意事项 #

• 若使用Smarty类模板，必须用{literal}{/literal}包裹JS代码，避免模板引擎解析JS中的大括号。
• 确保id="site-running-time"的容器在JS代码之前渲染，否则会出现找不到元素的错误。

内容的提问来源于stack exchange，提问作者ChaosAndre