FineReport 倒计时特效

1、代码准备

将下面的代码生成对应文件

1.1、zzsc.js

这段代码是一个JavaScript计时器脚本，用于计算从当前时间到第二天午夜（即0点）之间的时间差，并将这个时间差显示在网页上的特定元素中。具体来说，它会实时更新页面上指定的HTML元素（通过类名.se-txt选择），以显示剩余的天数、小时数、分钟数和秒数。

// 当文档加载完成时执行以下函数
$(document).ready(function () {
    var oDate = new Date(); // 获取当前日期和时间
    var nowTime = oDate.getTime(); // 获取当前时间的毫秒数
    oDate.setDate(oDate.getDate() + 1); // 将日期设置为明天
    var targetDate = new Date(oDate.toLocaleDateString()); // 获取明天午夜0点的日期对象
    run(targetDate); // 开始计时器
});

// 计时器主函数
function run(enddate) {
    getDate(enddate); // 初始化时间显示
    setInterval("getDate('" + enddate + "')", 500); // 每500毫秒（0.5秒）更新一次时间显示
}

// 计算并显示剩余时间
function getDate(enddate) {
    var oDate = new Date(); // 获取当前日期和时间
    var nowTime = oDate.getTime(); // 获取当前时间的毫秒数
    var enddate = new Date(enddate); // 将传入的字符串转换为日期对象
    var targetTime = enddate.getTime(); // 获取目标时间的毫秒数
    var second = Math.floor((targetTime - nowTime) / 1000); // 计算从现在到目标时间的总秒数

    var day = Math.floor(second / (24 * 60 * 60)); // 计算剩余的天数
    second %= (24 * 60 * 60); // 取模，得到剩余的秒数
    var hour = Math.floor(second / 3600); // 计算剩余的小时数
    second %= 3600; // 取模，得到剩余的秒数
    var minute = Math.floor(second / 60); // 计算剩余的分钟数
    second %= 60; // 取模，得到剩余的秒数

    var spanH = $('.se-txt')[0]; // 获取第一个 .se-txt 元素（小时）
    var spanM = $('.se-txt')[1]; // 获取第二个 .se-txt 元素（分钟）
    var spanS = $('.se-txt')[2]; // 获取第三个 .se-txt 元素（秒数）

    // 检查元素是否存在
    if (spanH != null && spanM != null && spanS != null) {
        spanH.innerHTML = tow(hour); // 更新小时数
        spanM.innerHTML = tow(minute); // 更新分钟数
        spanS.innerHTML = tow(second); // 更新秒数
    }
}

// 格式化时间，确保时间显示为两位数
function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
}

详细说明

• 初始化部分：
  • $(document).ready(function () { ... });：当文档加载完成后执行的函数。
  • var oDate = new Date();：获取当前日期和时间。
  • var nowTime = oDate.getTime();：获取当前时间的毫秒数。
  • oDate.setDate(oDate.getDate() + 1);：将日期设置为明天。
  • var targetDate = new Date(oDate.toLocaleDateString());：获取明天午夜0点的日期对象。
  • run(targetDate);：调用 run 函数开始计时器。
• 计时器主函数：
  • function run(enddate) { ... }：定义 run 函数，接收目标日期作为参数。
  • getDate(enddate);：初始化时间显示。
  • setInterval("getDate('" + enddate + "')", 500);：每500毫秒（0.5秒）调用一次 getDate 函数，更新时间显示。
• 计算并显示剩余时间：
  • function getDate(enddate) { ... }：定义 getDate 函数，计算并显示剩余时间。
  • var oDate = new Date();：获取当前日期和时间。
  • var nowTime = oDate.getTime();：获取当前时间的毫秒数。
  • var enddate = new Date(enddate);：将传入的字符串转换为日期对象。
  • var targetTime = enddate.getTime();：获取目标时间的毫秒数。
  • var second = Math.floor((targetTime - nowTime) / 1000);：计算从现在到目标时间的总秒数。
  • var day = Math.floor(second / (24 * 60 * 60));：计算剩余的天数。
  • second %= (24 * 60 * 60);：取模，得到剩余的秒数。
  • var hour = Math.floor(second / 3600);：计算剩余的小时数。
  • second %= 3600;：取模，得到剩余的秒数。
  • var minute = Math.floor(second / 60);：计算剩余的分钟数。
  • second %= 60;：取模，得到剩余的秒数。
  • var spanH = $('.se-txt')[0];：获取第一个 .se-txt 元素（小时）。
  • var spanM = $('.se-txt')[1];：获取第二个 .se-txt 元素（分钟）。
  • var spanS = $('.se-txt')[2];：获取第三个 .se-txt 元素（秒数）。
  • if (spanH != null && spanM != null && spanS != null) { ... }：检查这些元素是否存在。
  • spanH.innerHTML = tow(hour);：更新小时数。
  • spanM.innerHTML = tow(minute);：更新分钟数。
  • spanS.innerHTML = tow(second);：更新秒数。
• 格式化时间：
  • function tow(n) { ... }：定义 tow 函数，确保时间显示为两位数。
  • return n >= 0 && n < 10 ? '0' + n : '' + n;：如果数字小于10，则在前面加一个0。

1.2、zzsc.css

这段CSS代码定义了一个倒计时组件的样式，包括背景颜色、文字样式、位置布局等

/* 重置所有元素的默认边距和内边距 */
* {
    margin: 0;
    padding: 0;
}

/* 定义倒计时容器的样式 */
.se-kl {
    width: 190px; /* 容器宽度 */
    height: 275px; /* 容器高度 */
    background-color: #e83632; /* 背景颜色 */

    position: relative; /* 相对定位，以便内部元素可以使用绝对定位 */
}

/* 定义中文标题的样式 */
.se-cn {
    position: absolute; /* 绝对定位 */
    top: 42px; /* 距离顶部42px */
    left: 0; /* 距离左边0px */
    width: 100%; /* 宽度占满父容器 */
    text-align: center; /* 文字居中对齐 */
    font-size: 28px; /* 调小字体大小，适应更长的文本 */
    color: #fff; /* 字体颜色 */
    background-color: #2f3430; /* 背景颜色 */
    padding: 10px 0; /* 上下内边距 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    line-height: 1.2; /* 调整行高，使文字更紧凑 */
}

/* 定义英文标题的样式 */
.se-en {
    position: absolute; /* 绝对定位 */
    top: 90px; /* 距离顶部90px */
    left: 0; /* 距离左边0px */
    width: 100%; /* 宽度占满父容器 */
    text-align: center; /* 文字居中对齐 */
    font-size: 20px; /* 字体大小 */
    color: rgba(255, 255, 255, 0.5); /* 字体颜色，半透明白色 */
}

/* 定义图标的位置和样式 */
.se-io {
    width: 20px; /* 图标宽度 */
    height: 33px; /* 图标高度 */
    position: absolute; /* 绝对定位 */
    background: url(../seckill.png) no-repeat; /* 背景图片路径，不重复 */
    background-position: -32.5px 0; /* 背景图片的位置 */
    background-size: 52.5px 40px; /* 背景图片的尺寸 */
    left: 85px; /* 距离左边85px */
    top: 126px; /* 距离顶部126px */
    display: block; /* 显示为块级元素 */
}

/* 定义倒计时信息的样式 */
.se-info {
    position: absolute; /* 绝对定位 */
    top: 170px; /* 距离顶部170px */
    text-align: center; /* 文字居中对齐 */
    width: 100%; /* 宽度占满父容器 */
    font-size: 16px; /* 字体大小 */
    color: #fff; /* 字体颜色 */
}

/* 定义倒计时区域的样式 */
.se-count {
    position: absolute; /* 绝对定位 */
    top: 212px; /* 距离顶部212px */
    left: 30px; /* 距离左边30px */
    height: 40px; /* 高度 */
}

/* 定义天数显示的样式（默认隐藏） */
.se-day {
    display: none; /* 默认隐藏 */
}

/* 定义小时、分钟和秒数显示的公共样式 */
.se-hour,
.se-min,
.se-sec {
    position: relative; /* 相对定位 */
    background-color: #2f3430; /* 背景颜色 */
    width: 40px; /* 宽度 */
    height: 40px; /* 高度 */
    float: left; /* 左浮动，使它们水平排列 */
    text-align: center; /* 文字居中对齐 */
    line-height: 40px; /* 行高，使文字垂直居中 */
    margin-right: 5px; /* 右边距 */
}

/* 定义时间数字的样式 */
.se-txt {
    font-size: 20px; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    color: #fff; /* 字体颜色 */
}

/* 定义时间数字前的分割线 */
.se-txt:before {
    content: ""; /* 内容为空 */
    display: block; /* 显示为块级元素 */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 距离顶部50% */
    left: 0; /* 距离左边0px */
    width: 100%; /* 宽度占满父容器 */
    height: 1px; /* 高度1px */
    background-color: #e83632; /* 分割线颜色 */
}

详细说明

• 全局重置：
  • { margin: 0; padding: 0; }：重置所有元素的默认边距和内边距，确保布局的一致性。
• 倒计时容器：
  • .se-kl：定义了倒计时容器的基本样式，包括宽度、高度、背景颜色和相对定位。
• 中文标题：
  • .se-cn：定义了中文标题的样式，包括绝对定位、距离顶部和左边的距离、宽度、文字居中对齐、字体大小和颜色。
• 英文标题：
  • .se-en：定义了英文标题的样式，与中文标题类似，但字体颜色为半透明白色。
• 图标：
  • .se-io：定义了图标的样式，包括宽度、高度、绝对定位、背景图片路径、背景图片位置和尺寸、距离左边和顶部的距离，以及显示为块级元素。
• 倒计时信息：
  • .se-info：定义了倒计时信息的样式，包括绝对定位、距离顶部的距离、文字居中对齐、宽度、字体大小和颜色。
• 倒计时区域：
  • .se-count：定义了倒计时区域的样式，包括绝对定位、距离顶部和左边的距离，以及高度。
• 天数显示：
  • .se-day：定义了天数显示的样式，默认隐藏。
• 小时、分钟和秒数显示：
  • .se-hour, .se-min, .se-sec：定义了小时、分钟和秒数显示的公共样式，包括相对定位、背景颜色、宽度、高度、左浮动、文字居中对齐、行高和右边距。
• 时间数字：
  • .se-txt：定义了时间数字的样式，包括字体大小、加粗和颜色。
• 时间数字前的分割线：
  • .se-txt:before：定义了时间数字前的分割线，包括内容为空、显示为块级元素、绝对定位、距离顶部50%、宽度占满父容器、高度1px和背景颜色。

1.3、HTML代码

这段HTML代码定义了一个倒计时组件的结构，结合之前的CSS和JavaScript代码，可以实现一个动态显示的倒计时效果。

<!-- 倒计时容器 -->
<div class="se-kl"> 
    <!-- 中文标题 -->
    <div class="se-cn">双十一倒计时</div> 
    <!-- 英文标题 -->
    <div class="se-en">COUNT DOWN</div> 
    <!-- 图标 -->
    <i class="se-io"></i> 
    <!-- 倒计时信息 -->
    <div class="se-info">距离结束还剩</div> 
    <!-- 倒计时区域 -->
    <div class="se-count"> 
        <!-- 天数显示（默认隐藏） -->
        <div class="se-day"></div>
        <!-- 小时显示 -->
        <div class="se-hour">
            <span class="se-txt">00</span>
        </div>
        <!-- 分钟显示 -->
        <div class="se-min">
            <span class="se-txt">00</span>
        </div>
        <!-- 秒数显示 -->
        <div class="se-sec">
            <span class="se-txt">00</span>
        </div>
    </div> 
</div>

详细说明

• 倒计时容器：
  • <div class="se-kl"> ... </div>：这是整个倒计时组件的外层容器，包含了所有的子元素。它的样式在CSS中已经定义，包括宽度、高度、背景颜色和相对定位。
• 中文标题：
  • <div class="se-cn">双十一倒计时</div>：这是一个包含中文标题的<div>元素，样式在CSS中定义，包括绝对定位、距离顶部和左边的距离、宽度、文字居中对齐、字体大小和颜色。
• 英文标题：
  • <div class="se-en">COUNT DOWN</div>：这是一个包含英文标题的<div>元素，样式在CSS中定义，包括绝对定位、距离顶部和左边的距离、宽度、文字居中对齐、字体大小和半透明的白色颜色。
• 图标：
  • <i class="se-io"></i>：这是一个包含图标的<i>元素，样式在CSS中定义，包括宽度、高度、绝对定位、背景图片路径、背景图片位置和尺寸、距离左边和顶部的距离，以及显示为块级元素。
• 倒计时信息：
  • <div class="se-info">距离结束还剩</div>：这是一个包含倒计时信息的<div>元素，样式在CSS中定义，包括绝对定位、距离顶部的距离、文字居中对齐、宽度、字体大小和颜色。
• 倒计时区域：
  • <div class="se-count"> ... </div>：这是倒计时的具体显示区域，样式在CSS中定义，包括绝对定位、距离顶部和左边的距离，以及高度。
• 天数显示：
  • <div class="se-day"></div>：这是一个用于显示天数的<div>元素，默认情况下是隐藏的（在CSS中定义为 display: none;）。
• 小时显示：
  • <div class="se-hour"><span class="se-txt">00</span></div>：这是一个用于显示小时的<div>元素，包含一个<span>子元素，用于显示具体的小时数。样式在CSS中定义，包括相对定位、背景颜色、宽度、高度、左浮动、文字居中对齐、行高和右边距。<span>元素的样式也定义了字体大小、加粗和颜色。
• 分钟显示：
  • <div class="se-min"><span class="se-txt">00</span></div>：这是一个用于显示分钟的<div>元素，包含一个<span>子元素，用于显示具体的分钟数。样式与小时显示类似。
• 秒数显示：
  • <div class="se-sec"><span class="se-txt">00</span></div>：这是一个用于显示秒数的<div>元素，包含一个<span>子元素，用于显示具体的秒数。样式与小时显示类似。

2、报表内容

3、结果