非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
成品显示,可左右切换月份
html 代码
移动端日历
css代码
*{
margin: 0;
padding: 0;
}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
#calendarElement{
margin: 100px auto;
width: 80%;
box-shadow: 0 0 10px #999999;
}
#calendarElement>.header{
height: 80px;
background-color: coral;
display: flex;
border-bottom: 1px solid #fff;
}
#calendarElement>.header .prev{
width: 20%;
position: relative;
}
#calendarElement>.header .prev i{
width: 20px;
height: 20px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
transform: rotate(45deg);
border: 2px solid #fff;
border-right: none;
border-top: none;
}
#calendarElement>.header .next{
position: relative;
}
#calendarElement>.header .next i{
width: 20px;
height: 20px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
transform: rotate(45deg);
border: 2px solid #fff;
border-left: none;
border-bottom: none;
}
#calendarElement>.header .date{
width: 60%;
font-size: 22px;
line-height: 80px;
color: #fff;
text-align: center;
}
#calendarElement>.header .next{
width: 20%;
}
#calendarElement>.content >.week{
box-sizing: border-box;
width: 100%;
height: 40px;
color: #fff;
display: flex;
padding: 0 1%;
}
#calendarElement>.content >.week >div{
width: 14%;
text-align: center;
line-height: 40px;
}
#calendarElement>.content >.weekMany{
padding-top: 5px;
padding-bottom: 15px;
}
#calendarElement>.content >.weekMany>div{
float: left;
width: 14.28%;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
}
#calendarElement>.content >.weekMany>.otherMonth{
color: #999999
}
JS代码
var currentTime=""; //当前时间年月日
var dom=document.querySelector("#calendarElement"); //承载元素
var color="";
getCurrentTime();
randomColor();
showDay();
function getCurrentTime(){ //获取当前时间
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth()+1;
var day=time.getDate();
if(month<10){
month="0"+month
}
var data=year+ "-" +month;
currentTime=year+ "-" +month+"-"+day;
document.querySelector(".date").innerHTML=data;
};
dom.addEventListener("click",function(e){
if(e.target.className=="previ" || e.target.className=="prev"){
getMonths("prev")
}else if(e.target.className=="nexti" || e.target.className=="next"){
getMonths("next")
}
})
function showDay(){
var html="";
var MonthOne=currentTime;
var yearMonth=currentTime.split('-').slice(0,2);
yearMonth=yearMonth.join('-');
document.querySelector(".date").innerHTML=yearMonth;
MonthOne=MonthOne.split('');
MonthOne.splice(8,2,"01")
MonthOne=MonthOne.join('');
var monthLen=getMonthLength(MonthOne); //每月有多少天
var weekMany=new Date(MonthOne).getDay(); //每月一号是星期几
html+=getPrevMonthHtml(weekMany);
html+=getNowMonthHtml(monthLen);
html+=getNextMonthHtml(weekMany,monthLen);
document.querySelector(".weekMany").innerHTML=html;
}
function getPrevMonthHtml(weekMany){
var html="";
var lastMonth=currentTime.substring(0, 7); //得出年月
lastMonth=lastMonth.split('-')
if(lastMonth[1]-1==0){
lastMonth[1]=12;
lastMonth[0]=lastMonth[0]-1;
}else if(lastMonth[1]-1<10){
lastMonth[1]="0"+(lastMonth[1]-1);
}
lastMonth=lastMonth.join('-');
var monthLen=getMonthLength(lastMonth);
var start=monthLen-weekMany;
for(var i=start+1;i<=monthLen;i++){
html+='
';
}
return html;
}
function getNowMonthHtml(monthLen){
var html="";
var MonthOne=currentTime.substring(0, 7); //得出年月
var today=currentTime.split('-')[2];
for(var i=1;i<=monthLen;i++){
if(i<10){
var q="0"+i;
}else{
var q=i;
}
if(i==today){
html+='
';
}else{
html+='
';
}
}
return html;
}
function getNextMonthHtml(weekMany,monthLen){
var html="";
var daynum=weekMany+monthLen;
if(daynum%7==0){
return html;
}else{
var num=daynum%7;
var lessNum=7-num; //差几天
var lowerMonth=currentTime.substring(0, 7); //得出年月
lowerMonth=lowerMonth.split('-')
if(lowerMonth[1]+1==13){
lowerMonth[1]="0"+1;
lowerMonth[0]=+lowerMonth[0]+1;
}else{
lowerMonth[1]=+lowerMonth[1]+1;
if(lowerMonth[1]<10){
lowerMonth[1]="0"+lowerMonth[1];
}
}
lowerMonth=lowerMonth.join('-');
for(var i=1;i<=lessNum;i++){
if(i<10){
var q="0"+i
}
html+='
';
}
}
return html;
}
function getMonths(around){
if(around=="prev"){
currentTime=currentTime.split('-');
currentTime[1]=currentTime[1]-1;
if(currentTime[1]==0){
currentTime[1]="12"
currentTime[0]=+currentTime[0]-1
}
if(currentTime[1]<10){
currentTime[1]="0"+currentTime[1]
}
currentTime=currentTime.join('-');
showDay();
}else if(around=="next"){
currentTime=currentTime.split('-');
currentTime[1]=+currentTime[1]+1;
if(currentTime[1]==13){
currentTime[1]="1"
currentTime[0]=+currentTime[0]+1
}
if(currentTime[1]<10){
currentTime[1]="0"+currentTime[1]
}
currentTime=currentTime.join('-');
showDay();
}
}
function getMonthLength(date) { // 获取每月有多少天
let d = new Date(date)
// 将日期设置为下月一号
d.setMonth(d.getMonth()+1)
d.setDate('1')
// 获取本月最后一天
d.setDate(d.getDate()-1)
return d.getDate()
}
function randomColor(){ //随机颜色
color = '#'+Math.floor(Math.random()*16777215).toString(16);
if(color.length==6){
color+="0"
}
document.querySelector(".header").style.backgroundColor=color;
document.querySelector(".week").style.backgroundColor=color;
};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...相关推荐
- HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列 ...
- html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h ...
- ASP.NET页面动态添加js脚本
有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...
- html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?(代码实例)
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
- 加载页面前执行js脚本,实现浏览器指纹变更
一般浏览器先加载主页,再请求关联的js脚本文件.不管你把js代码嵌入在html中,还是独立保存为一个文件,都必须等待主页加载完成,js代码加载完成后才能执行.网上有人说把js代码放在head里面,其实 ...
- 一款好看404页面|HTML-404模板
介绍 建立一个创造性的和鼓舞人心的404错误页面设计,这有助于使访问者停留在网站上. 下载链接 http://www.bytepan.com/BQpSGkpjD2p 图片
- 手机 html5 hammer drag widget,Hammer.js+轮播原理实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...
- Chrome页面自动刷新js脚本
Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.您可以访问和从任何页面运行它们.当你运行一个片段,它从当前打开的页面的上下文中执行.本文主要讲如何 ...
- html5地球旋转效果,javascript模拟地球旋转效果代码实例
JS模拟地球旋转-柯乐义 JS模拟地球旋转·柯乐义 eval(z = 'p=""/* ,.oq#+ ,._, */;for(y in n="zw24l6k\ 4e3t4j ...
最新文章
- 论文不公开代码,应该被直接拒稿?
- java 发送邮件_老板要实现SpringBoot发送邮件?大神发了这篇文章后,今晚准点下班...
- java怎么从一个类传值到另一个类_Android开发之两个类之间的数据传递
- 3.2-3 tac、more
- Android:日常学习笔记(6)——探究活动(3)
- 使用函数指针实现父类函数调用子类函数的两种方式
- centos7 安装 php-fpm_centos7中如何安装 php-fpm(nginx)
- Rust+Yew之hello world
- 下拉菜单,防鼠标反复触发
- win7右键没有新建文件夹了
- 原生js的dom操作
- sop流程图模板_SOP模板-标准操作流程编写程序
- 海思制作EXT4文件系统工具make_ext4fs
- 李阳和他的疯狂英语(r5笔记第46天)
- win7快捷关闭计算机,win7系统快速启动功能关闭的处理方法
- MFC添加勾选控件check box
- Nachos操作系统synch(lab3)
- 保护环境从我做起(10件力所能及之事)
- Linux中的stdout和stderr
- 2.1.2 Android刘海屏适配
热门文章
- 在生产环境中使用 Sentinel
- oracle查询当前用户名下所有表
- SpringBoot 整合 Redis 哨兵机制_02
- Flowable工作流总结_工作规范流程设计思路
- SecureCRT 设置护眼最佳方案 的字体及颜色
- 解决sonar scanner扫描报错Please provide compiled classes of your project with sonar.java.binaries property
- idea terminal 不支持中文
- python student类_9.Python类和对象
- C语言 ##运算符 - C语言零基础入门教程
- linux卡在nfs挂载怎么办,51CTO博客-专业IT技术博客创作平台-技术成就梦想