编程 Javascript

js实现会跳动的日历效果(完整实例)

Posted in Javascript onOctober 18, 2017

一、简介

编写一个会动的日历，日历上面有年月日，周几，时分秒，效果如下：

js实现会跳动的日历效果(完整实例)

年月日，周几，时分秒都会随着系统时间的走动而改变

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Document</title>
 <style type="text/css">
  *{
   margin:0;
   padding: 0; 
   font-size: 0px;
   font-family: '微软雅黑';
  }
  .contain-wrapper{
   margin: 0 auto;
   padding-top: 70px;
   width: 470px;
   height: 230px;
   background: #000000;
   border-radius: 30px;
  }
  .timer-wrapper p{
   font-size: 44px;
   color: #ffffff;
  }
  .year{
   width: 470px;
   text-align: center;
  }
  .timer-footer{
   width: 460px;
   text-align: center;
  }
  .timer-footer p:nth-child(1){
   display: inline-block;
  }
  .timer-footer p:nth-child(2){
   display: inline-block;
  }
 </style>
</head>
<body>
 <div class="contain-wrapper">
  <div class="timer-wrapper">
   <p class="year"></p>
   <div class="timer-footer">
    <p></p>
    <p></p>
   </div>
  </div>
 </div>
</body>
<script type="text/javascript">
  
  /*
  *这是一个获取当前日期的函数
   */
  function showLocaleDate(objb){
   var str = objb.getFullYear()+"年"+(objb.getMonth()+1)+"月"+objb.getDate()+"日";
   return str;
  }
  var year=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[0];

  
  /*
  *这是一个获取星期几的函数
   */
  function showLocaleWeek(objC){
   var weekArray = new Array("日", "一", "二", "三", "四", "五", "六"); 
   var week = objC.getDay(); 
   var weekString = "星期"+ weekArray[week];
   return weekString;
  }
  var wk=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[1];
  /*
  *这是一个获取当前时间的函数
   */

  function showLocaleTime(objD){
   var hh = objD.getHours();
   if(hh<10) hh = '0' + hh;
   var mm = objD.getMinutes();
   if(mm<10) mm = '0' + mm;
   var ss = objD.getSeconds();
   if(ss<10) ss = '0' + ss;
   var reflash=hh + ":" + mm + ":" + ss;
   return reflash;
  }
  var now=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[2];

  function showTime(){
   var today=new Date();
   year.innerHTML=showLocaleDate(today);
   wk.innerHTML=showLocaleWeek(today);
    now.innerHTML=showLocaleTime(today);
    window.setTimeout("showTime()",1000);
  }
  showTime();
</script>
</html>

以上这篇js实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

js实现会跳动的日历效果(完整实例)

- Author -

fyk曩昔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery学习5 jQuery事件模型

Feb 07 Javascript

Javascript让DEDECMS告别手写Tag

Sep 01 Javascript

js 操作符汇总

Nov 08 Javascript

针对后台列表table拖拽比较实用的jquery拖动排序

Oct 10 Javascript

详解node服务器中打开html文件的两种方法

Sep 18 Javascript

vue .js绑定checkbox并获取、改变选中状态的实例

Aug 24 Javascript

Vue中使用sass实现换肤功能

Sep 07 Javascript

通过说明与示例了解js五种设计模式

Jun 17 Javascript

vue中改变滚动条样式的方法

Mar 03 Javascript

jQuery实现点击滚动到指定元素上的方法分析

Mar 19 jQuery

云服务器部署Node.js项目的方法步骤(小白系列)

Mar 23 Javascript

jQuery插件simplePagination的使用方法示例

Apr 28 jQuery

打字效果动画的4种实现方法(超简单)

Oct 18 #Javascript

Angularjs 手写日历的实现代码（不用插件）

Oct 18 #Javascript

基于JavaScript表单脚本(详解)

Oct 18 #Javascript

VUE饿了么树形控件添加增删改功能的示例代码

Oct 17 #Javascript

vue-router实现tab标签页（单页面）详解

Oct 17 #Javascript

BACKBONE.JS 简单入门范例

Oct 17 #Javascript

JS获取一个表单字段中多条数据并转化为json格式

Oct 17 #Javascript