js 当前日期_Js交互特效案例实战之13日期特效

最新推荐文章于 2022-08-09 11:53:57 发布

weixin_39896617

最新推荐文章于 2022-08-09 11:53:57 发布

阅读量213

点赞数

文章标签： js 当前日期 js 日期加一个月 js 日期加一天 js 获取年月日 js 获取当前日期 js三元运算符

本节学习大纲

1、要求:日期特效

2、搭建基础页面

3、实现时间的显示

3.1 获取标签，即两处段落内容

3.2 获取相关日期

3.3 对函数进行调用

3.4 体现时间变化

4、整体代码体现

1、要求：日期特效

要利用js实现当前日期的显示，例如“20XX年X月X日 XX:XX:XX A.M. 星期X”，下方显示当天的日期数。同时，时间要更新变化。如下图所示：

2、搭建基础页面

利用js实现日期特效，则文字内容可以用段落的形式呈现。

html><html><head><meta charset="utf-8"><title>title><style type="text/css">
   * {padding: 0;margin: 0;
   }#date {width: 600px;height: 400px;background-color: #FF8C00;border-radius: 10px;margin: 100px auto;
   }#nowTime {width: 600px;height: 100px;line-height: 100px;text-align: center;color: #fff;font-size: 30px;
   }#day {width: 200px;height: 200px;line-height: 200px;background-color: #DA70D6;margin: 0 auto;text-align: center;color: #fff;font-weight: bold;font-size: 60px;
   }style>head><body><div id="date"><p id="nowTime">p><p id="day">p>div>body>html>

此时，基础页面已经搭建好了。页面展示为：

3、实现时间的显示

3.1 获取标签，即两处段落内容。

<script type="text/javascript">// 获取标签var nowTime = document.getElementById("nowTime"); // var day = document.getElementById("day"); // 日期script>

利用js来实现时间的显示，“20XX年X月X日 XX:XX:XX A.M. 星期X”，就会用到之前js入门学习时的数字时钟的格式时间。

3.2 获取相关日期：

获取相关的年月日时分秒星期等数据。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getFullYear() 从 Date 对象以四位数字返回年份。

getMonth() 返回表示月份的数字，返回月份 (0 ~ 11)。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

星期X可以利用 getDay() 返回的值来计算。声明一个 myWs 的数组， getDay() 返回的值是一个索引，以此来得到星期X的信息。

小时按照12进制显示，则会用到“A.M.''和"P.M."。但是小时返回的是0到23，0表示24点，所以要对返回的小时值进行判断。可以利用三元运算符来进行判断。

若返回值大于12，则目前为下午时间，显示值减去12的差，即为目前下午的小时数；

若返回值小于12，则目前为上午时间，显示当前值即为目前上午的小时数；

若返回值等于0，则表示是24点，当前小时数则为12 。

此外，加空字符串后，返回的是字符串。

在最终的时间体现时，需要将所有的都拼接起来，可以利用模板字符串来调用。其中，输出月份时，getMonth() 返回值是0到11，为了体现实际的月份，所以在拼接整体时间时要加1。

最后将整体时间的输出值显示为 nowTime 的内容。

日期显示，则是将日期输出值显示为 day 的内容即可。

<script type="text/javascript">function nowNumTime() {// 年月日时分秒星期var now = new Date(); // 创建Date对象var myHour = now.getHours(); // 时  var myMinute = now.getMinutes(); // 分  var mySecond = now.getSeconds(); // 秒 var myYear = now.getFullYear(); // 年var myMonth = now.getMonth(); // 月  var myDay = now.getDate(); // 日  var myWeek = now.getDay(); // console.log(myWeek); // 输出的是一个索引var myWs = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]// 对小时数12进制进行判断var temp = "" + (myHour > 12 ? myHour - 12 : myHour); // 时if (myHour === 0) {
            temp = 12;
        }
        temp = temp + (myMinute 10 ? ':0': ":") + myMinute; // 时分
        temp = temp + (mySecond 10 ? ':0': ":") + mySecond; // 时分秒
        temp = temp + (myHour 12 ? ' A.M.': " P.M."); // 时分秒(上下午)
        
        // 整体呈现
        temp = `${myYear}年${myMonth+1}月${myDay}日 ${temp} ${myWs[myWeek]}`; // 利用模板字符串调用
        nowTime.innerHTML = temp;
        day.innerHTML = myDay;
    }
script>

3.3 对函数进行调用

目前函数已经设置好了，要想实现页面时间显示，则需要调用函数

<script type="text/javascript">// 获取标签var nowTime = document.getElementById("nowTime");var day = document.getElementById("day");// 调用函数，实现时间呈现
    nowNumTime();function nowNumTime() {// 年月日时分秒var now = new Date(); // 创建Date对象var myHour = now.getHours(); // 时  var myMinute = now.getMinutes(); // 分  var mySecond = now.getSeconds(); // 秒 var myYear = now.getFullYear(); // 年var myMonth = now.getMonth(); // 月  var myDay = now.getDate(); // 日  var myWeek = now.getDay(); // console.log(myWeek); // 输出的是一个索引var myWs = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]// 对小时数12进制进行判断// 8 > 12 ? 18 - 12 : 8var temp = "" + (myHour > 12 ? myHour - 12 : myHour); // 时if (myHour === 0) {
            temp = 12;
        }
        temp = temp + (myMinute 10 ? ':0': ":") + myMinute; // 时分
        temp = temp + (mySecond 10 ? ':0': ":") + mySecond; // 时分秒
        temp = temp + (myHour 12 ? ' A.M.': " P.M."); // 时分秒(上下午)

        // 整体呈现
        temp = `${myYear}年${myMonth+1}月${myDay}日 ${temp} ${myWs[myWeek]}`; // 利用模板字符串调用
        nowTime.innerHTML = temp;
        day.innerHTML = myDay;
    }
script>

则时间显示实现了，目前的页面展示为：

3.4 体现时间变化

要体现时间变化，则可以用时间定时器。

setInterval(代码或函数, 周期性执行或调用 code/function 之间的时间间隔，以毫秒计);

因为要让时间明显的动起来，所以时间间隔可以设置小一点。

<script type="text/javascript">// 获取标签var nowTime = document.getElementById("nowTime");var day = document.getElementById("day");// 用定时器 更新时间的变化
 setInterval(nowNumTime, 15); // 间隔为15毫秒function nowNumTime() {// 年月日时分秒var now = new Date(); // 创建Date对象var myHour = now.getHours(); // 时  var myMinute = now.getMinutes(); // 分  var mySecond = now.getSeconds(); // 秒 var myYear = now.getFullYear(); // 年var myMonth = now.getMonth(); // 月  var myDay = now.getDate(); // 日  var myWeek = now.getDay(); // console.log(myWeek); // 输出的是一个索引var myWs = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]// 对小时数12进制进行判断// 8 > 12 ? 18 - 12 : 8var temp = "" + (myHour > 12 ? myHour - 12 : myHour); // 时if (myHour === 0) {
            temp = 12;
        }
        temp = temp + (myMinute 10 ? ':0': ":") + myMinute; // 时分
        temp = temp + (mySecond 10 ? ':0': ":") + mySecond; // 时分秒
        temp = temp + (myHour 12 ? ' A.M.': " P.M."); // 时分秒(上下午)

        // 整体呈现
        temp = `${myYear}年${myMonth+1}月${myDay}日 ${temp} ${myWs[myWeek]}`; // 利用模板字符串调用
        nowTime.innerHTML = temp;
        day.innerHTML = myDay;
    }
script>

此时，功能已经实现了，页面展示为：

4、整体代码显示

html><html>  <head><meta charset="utf-8"><title>title><style type="text/css">
   * {padding: 0;margin: 0;
   }#date {width: 600px;height: 400px;background-color: #FF8C00;border-radius: 10px;margin: 100px auto;
   }#nowTime {width: 600px;height: 100px;line-height: 100px;text-align: center;color: #fff;font-size: 30px;
   }#day {width: 200px;height: 200px;line-height: 200px;background-color: #DA70D6;margin: 0 auto;text-align: center;color: #fff;font-weight: bold;font-size: 60px;
   }style>head><body><div id="date"><p id="nowTime"> p><p id="day">p>div>body><script type="text/javascript">// 获取标签var nowTime = document.getElementById("nowTime");var day = document.getElementById("day");// 用定时器 更新时间的变化
        setInterval(nowNumTime, 15); // 间隔为15毫秒function nowNumTime() {// 年月日时分秒var now = new Date(); // 创建Date对象var myHour = now.getHours(); // 时  var myMinute = now.getMinutes(); // 分  var mySecond = now.getSeconds(); // 秒 var myYear = now.getFullYear(); // 年var myMonth = now.getMonth(); // 月  var myDay = now.getDate(); // 日  var myWeek = now.getDay(); // console.log(myWeek); // 输出的是一个索引var myWs = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]// 对小时数12进制进行判断// 8 > 12 ? 18 - 12 : 8var temp = "" + (myHour > 12 ? myHour - 12 : myHour); // 时if (myHour === 0) {
                temp = 12;
            }
            temp = temp + (myMinute 10 ? ':0': ":") + myMinute; // 时分
            temp = temp + (mySecond 10 ? ':0': ":") + mySecond; // 时分秒
            temp = temp + (myHour 12 ? ' A.M.': " P.M."); // 时分秒(上下午)

            // 整体呈现
            temp = `${myYear}年${myMonth+1}月${myDay}日 ${temp} ${myWs[myWeek]}`; // 利用模板字符串调用
            nowTime.innerHTML = temp;
            day.innerHTML = myDay;
        }
    script>
html>

weixin_39896617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫