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实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
canvas实现图像放大镜
Feb 06 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
深入浅析React中diff算法
May 19 Javascript
打字效果动画的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
You might like
PHP 输出缓存详解
2009/06/20 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python里隐藏的“禅”
2014/06/16 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python分析作业提交情况
2017/11/22 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python制作朋友圈九宫格图片
2019/11/03 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers