如何使用js实现简单日历效果

如何使用js实现简单日历效果

知识点介绍:

1、引入我的工具包

2、运用JavaScript内置对象 Date

先来看一下运行效果:

如图:

dca4f55b9bf4d02b02d03b358081fa2.png

(推荐教程:js教程)

直接上代码:

nbsp;html>  Title   *{   margin: 0;   padding: 0;  }  #box{   width: 250px;   height: 300px;   background-color: orangered;   margin: 100px auto;   padding: 30px;  }  #box_top{   font-size: 22px;   color: #fff;   margin-bottom: 40px;   display: flex;   justify-content: space-around;  }  #box_bottom{   width: 90%;   height: 70%;   margin: 0 auto;   background-color: orange;   font-size: 50px;   color:#fff;   display: flex;   justify-content: center;   align-items: center;  }  
  
                       
  
      :      :     
 
   window.addEventListener('load',function (ev) { setInterval(function () { myTool.$('year').innerText = myTool.getTime().year; myTool.$('month').innerText = myTool.getTime().month < 10 ? '0' + myTool.getTime().month : myTool.getTime().month; myTool.$('day').innerText = myTool.getTime().day < 10 ? '0' + myTool.getTime().day : myTool.getTime().day; myTool.$('week').innerText = myTool.getTime().week ; myTool.$('hour').innerText = myTool.getTime().hour < 10 ? '0' + myTool.getTime().hour : myTool.getTime().hour; myTool.$('minute').innerText = myTool.getTime().minute < 10 ? '0' + myTool.getTime().minute : myTool.getTime().minute; myTool.$('second').innerText = myTool.getTime().second < 10 ? '0' + myTool.getTime().second : myTool.getTime().second; },1000); },false);

登录后复制

更多炫酷CSS3、html5、javascript特效代码,尽在:js特效大全

以上就是如何使用js实现简单日历效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2728991.html

(0)
上一篇 2025年3月8日 00:02:09
下一篇 2025年2月24日 21:00:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js数组的函数用法详解

    本文为大家实例讲解了js数组的几种函数用法,希望对大家有所帮助。 实例如下:             js数组进阶                 var arr=[2,”clannad”,”海贼王”,”星游记”,true,new Date…

    2025年3月8日
    200
  • js如何实现计数排序

    本文介绍了js实现计数排序的方法(升级版) 原版计数排序,桶的容积需要一个可以包含最小值到最大值所有可能出现的数字。这里我们可以将桶换成对象,利用对象的自动排序与不能出现相同属性名的键值对这两个特点,不需要一个有序容积的桶,随意新增键值对即…

    2025年3月8日
    200
  • 详解js中图片懒加载的实现原理

    图片懒加载优势: 增强用户体验; 优化代码; 减少http的请求; 减少服务器端压力; 服务器的按需加载; 图片懒加载原理: 先将图片的src设置为同一张图片或者不设置,同时给img标签设置一个特殊属性,例如:data-src用于存放图片的…

    2025年3月8日
    200
  • js中如何利用正则匹配多个全部数据

    如果我们需要获取所有title里的内容该如何做呢? 正则表达式后面加g表示多次匹配 方式一:match  返回数组 方式二 exec 实例如下: var str='OOOT BAORJCT 174296 22mm 10yard/l…

    2025年3月8日
    200
  • 如何利用js计算正方形的面积

    用js实现计算正方形的面积可以使用一个math.pow()函数。 先来看实现效果: 实例代码: nbsp;html>  Document  登录后复制 function area(radius){ var radius=documen…

    2025年3月8日
    200
  • js如何修改注册表

    本文主要通过wshshell 对象的相关方法实现。 WshShell对象是WSH(WSH是Windows ing Host的缩写,内嵌于Windows操作系统中的脚本语言工作环境)的内建对象,主要负责程序的本地运行、处理注册表、创建快捷方式…

    2025年3月8日
    200
  • js如何实现蒙版效果

    我们来分析一下思路: 1、监听按钮的点击 2、阻止冒泡(最关键的一点) 3、让隐藏的显示出来 4、隐藏滚动条 5、点击文档:获取点击的标签 判断:让显示的都隐藏 显示滚动条 *{ margin: 0; padding: 0; } html,…

    2025年3月8日
    200
  • 利用js模仿360开机效果

    实现效果: 点击关闭图片按钮先往下退出再往右退出。 实现步骤: 1、封装运动函数 2、给图片上的关闭设置一个盒子 3、给关闭盒子注册点击事件点击后 4、下面图片高度为0,设置一个缓动动画 5、上面图片宽度为0,设置一个缓动动画 缓动动画代码…

    2025年3月8日
    200
  • 如何利用js实现水平移动与垂直移动效果

    水平移动分析: 可看成是一个物体的左边距变化。 比如:向右移动是左边距越来越大(数值为正),可调整物体的左边距来实现 向左移动是左边距越来越小(数值为负),可调整物体的左边距来实现 实际代码如下: *{padding: 0;margin: …

    2025年3月8日
    200
  • 如何利用js获取form表单数据

    方法如下: 1、有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较麻烦。代码冗余度也比较多,因此封装了一个方法。 2、表单元素必须要有name属性,name属性是向后端提交的字段数据。 3、html代码 下拉框   sel-1…

    2025年3月8日
    200

发表回复

登录后才能评论