【温故而知新-Javascript】时间效果(显示当前时间、显示当前日期、显示页面停留时间、倒计时)...

论坛 期权论坛     
选择匿名的用户   2021-5-22 22:08   19   0
<div class="blogpost-body" id="cnblogs_post_body">
<p>1.显示当前时间</p>
<div class="cnblogs_code">
  <pre class="blockcode"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">body </span><span style="color:#ff0000;">onload</span><span style="color:#0000ff;">&#61;&#34;showtime()&#34;</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">div</span><span style="color:#0000ff;">&gt;</span><span style="color:#000000;">当前时间:
</span><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">span </span><span style="color:#ff0000;">id</span><span style="color:#0000ff;">&#61;&#34;clock&#34;</span><span style="color:#0000ff;">&gt;&lt;/</span><span style="color:#800000;">span </span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">div</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">script </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">&#61;&#34;application/javascript&#34;</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">function</span><span style="color:#000000;"> showtime()</span><span style="color:#008000;">//</span><span style="color:#008000;">创建函数</span>
<span style="color:#000000;">{
    </span><span style="color:#0000ff;">var</span><span style="color:#000000;"> nowTime </span><span style="color:#000000;">&#61;</span> <span style="color:#0000ff;">new</span><span style="color:#000000;"> Date();</span><span style="color:#008000;">//</span><span style="color:#008000;">创建时间对象实例</span>
    <span style="color:#0000ff;">var</span><span style="color:#000000;"> hours </span><span style="color:#000000;">&#61;</span><span style="color:#000000;"> nowTime.getHours();</span><span style="color:#008000;">//</span><span style="color:#008000;">获取当前小时数</span>
    <span style="color:#0000ff;">var</span><span style="color:#000000;"> minutes </span><span style="color:#000000;">&#61;</span><span style="color:#000000;"> nowTime.getMinutes();</span><span style="color:#008000;">//</span><span style="color:#008000;">获取当前分钟数</span>
    <span style="color:#0000ff;">var</span><span style="color:#000000;"> seconds </span><span style="color:#000000;">&#61;</span><span style="color:#000000;"> nowTime.getSeconds();</span><span style="color:#008000;">//</span><span style="color:#008000;">获取当前秒数</span>
    <span style="color:#0000ff;">var</span><span style="color:#000000;"> timer </span><span style="color:#000000;">&#61;</span> <span style="color:#000000;">&#34;</span> <span style="color:#000000;">&#34;</span><span style="color:#000000;">&#43;</span><span style="color:#000000;">((hours</span><span style="color:#000000;">&gt;</span><span style="color:#000000;">12</span><span style="color:#000000;">)</span><span style="color:#000000;">?</span><span style="color:#000000;">hours</span><span style="color:#000000;">-</span><span style="color:#000000;">12</span><span style="color:#000000;">:hours);</span><span style="color:#008000;">//</span><span style="color:#008000;">将小时数质赋予变量timer</span>
<span style="color:#000000;">    timer </span><span style="color:#000000;">&#43;&#61;</span><span style="color:#000000;">((minutes</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">10</span><span style="color:#000000;">)</span><span style="color:#000000;">?</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">0:</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">:</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">:</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">)</span><span style="color:#000000;">&#43;</span><span style="color:#000000;">minutes;</span><span style="color:#008000;">//</span><span style="color:#008000;">将分钟数值赋予变量timer</span>
<span style="color:#000000;">    timer </span><span style="color:#000000;">&#43;&#61;</span><span style="color:#000000;"> ((seconds</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">10</span><span style="color:#000000;">)</span><span style="color:#000000;">?</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">0:</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">:</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">:</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">)</span><span style="color:#000000;">&#43;</span><span style="color:#000000;">seconds;</span><span style="color:#008000;">//</span><span style="color:#008000;">将秒数值赋予变量timer</span>
<span style="color:#000000;">    timer </span><span style="color:#000000;">&#43;&#61;</span><span style="color:#000000;">&#34;</span> <span style="color:#000000;">&#34;</span><span style="color:#000000;">&#43;</span><span style="color:#000000;">((hours</span><span style="color:#000000;">&gt;</span><span style="color:#000000;">12</span><span style="color:#000000;">)</span><span style="color:#000000;">?</span><span style="color:#000000;">&#34;</span><span style="color:#000000;">pm</span><span style="color:
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP