纯原生js改良版

最新推荐文章于 2024-04-07 02:07:21 发布
最新推荐文章于 2024-04-07 02:07:21 发布
阅读量348 收藏
点赞数
分类专栏： h5 文章标签： 日历 原生 css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanseyuanwei2/article/details/51965901
版权

纯原生js改良版日历，效果如下：


代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 0px;
}
#c_top_t{
width: 100%;
/*border-collapse: collapse;*/
}
.left div .lefta{
display: inline-block;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-right: 8px solid #3081C2;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
margin-top: 2px;
margin-left: -2px;
}
.left div .righta{
display: inline-block;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #3081C2;
margin-top: 2px;
margin-left: 6px;
}
.left{
width: 100%;
position: relative;
text-align: center;
border: 1px solid #B1D2EC;
}
.left div{
display: block;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #DEECF8;
position: absolute;
text-align: left;
}
input{
display: block;
margin: 0px;
vertical-align: middle;
height: 18px;
border: none;
width: 95%;
padding:1px 1px 1px 5px;
text-align: center;
}
#c_top_t td{
/*border: 1px solid #B1D2EC;*/
position: relative;
}
.rightd{
top: 0px;
right: 0px;
border-left: 1px solid #B1D2EC;
}
.leftd{
border-right: 1px solid #B1D2EC;
}
#calendars{
padding: 0px 10px;
text-align: center;
}
.indictor{
position: absolute;
right: 25px;
top: 5px;
}
.leftshow{
/*height: 200px;*/
left: 0px;
right: -2px;
position: absolute;
background-color: #DEECF8;
display: none;
border: 1px solid #B1D2EC;
border-top:none ;
}
.indictor:hover{
cursor: pointer;
}
.leftshow ul{
padding: 0px;
margin: 0px;
list-style: none;
}
.leftshow ul li{
font-size: 16px;
display: inline-block;
width: 50%;
text-align: center;
margin-top:2px ;
cursor: pointer;
/*color: white;*/
}
.leftshow div{
text-align: center;
/*background-color: darkturquoise;*/
/*height: 16px;*/
}
.leftshow div a.top{
display: inline-block;
margin-top: -4px;
margin-bottom: 4px;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #3081C2;
border-left: 8px solid transparent;
}
.leftshow div a.bottom{
display: inline-block;
margin-top: 4px;
margin-bottom: -4px;
width: 0px;
height: 0px;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #3081C2;
border-left: 8px solid transparent;
}

.leftshow li:hover{
background-color: white;
}
.top_div{
border-bottom: 1px solid #B1D2EC;
}
.bottom_div{
border-top: 1px solid #B1D2EC;
}
#c_top{
margin-top: -10px;
}
#calendar{
width: 100%;
border-collapse: collapse;
}
#calendar td{
padding: 2px 5px;
font-size: 16px;
border: 1px solid#B1D2EC;
}
</style>
</head>
<body>
<div id="calendars">
<div id="c_top">
<table id="c_top_t" cellpadding="0" border="0" cellspacing="10px">
<tr>
<td><div class="left">
<div class="leftd"><a class="lefta"  href="#" οnclick="yminus()"></a></div>
<input id="year" value="2016年"/><img class="indictor" οnclick="doClicky()" src="img/小箭头.png">
<div class="rightd"><a class="righta" href="#" οnclick="yadd()"></a></div>
</div>
<div class="leftshow" id="leftshow">
<div class="top_div"><a href="#" οnclick="yearminus()" class="top"></a></div>
<ul id="yearul">
</ul>
<div class="bottom_div"><a href="#" οnclick="yearadd()" class="bottom"></a></div>
</div>
</td><td>
<div class="left">
<div class="leftd"><a class="lefta" href="#" οnclick="mminus()"></a></div>
<input  id="month" value="4月"/><img class="indictor" οnclick="doClickm()" src="img/小箭头.png">
<div class="rightd"><a class="righta" href="#" οnclick="madd()"></a></div>
</div>
<div class="leftshow" id="rightshow">
<ul id="monthul">
</ul>
</div>
</td>
</tr>
</table>
<div style="padding: 0px 8px 0px 10px;" >
<table id="calendar" cellpadding="0" border="0" cellspacing="0">
</table>
</div>
</div>
</div>
<script type="text/javascript">
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return document.defaultView.getComputedStyle(obj,false)[attr];
}
}
function doClicky(){
document.getElementById("rightshow").style.display='none';
var leftshow=document.getElementById('leftshow');
var leftshow_d=getStyle(leftshow,"display");
if(leftshow_d=='none')
{
leftshow.style.display='block';
}else{
leftshow.style.display='none';
}
var in_y=document.getElementById("year").value.replace("年",'');
console.log(in_y);
in_y-=5;
var year_ul=document.getElementById('yearul');
removeChildren(year_ul);
for(var i=0;i<10;i++){
var yearli=document.createElement('li');
yearli.innerText=in_y+i+'年';
yearli.οnclick=function(){
document.getElementById("year").value=this.innerText;
createCalendar();
leftshow.style.display='none';
}
year_ul.appendChild(yearli);
}

}
function removeChildren(pnode){    
var childs=pnode.childNodes;    
for(var i=childs.length-1;i>=0;i--){    
pnode.removeChild(childs.item(i));    
}    
}  
function doClickm(){
document.getElementById("leftshow").style.display='none';
var leftshow=document.getElementById('rightshow');
var leftshow_d=getStyle(leftshow,"display");
console.log(leftshow_d);
if(leftshow_d=='none')
{
leftshow.style.display='block';
}else{
leftshow.style.display='none';
}
var year_ul=document.getElementById('monthul');
removeChildren(year_ul);
for(var i=1;i<13;i++){
var yearli=document.createElement('li');
yearli.innerText=i+'月';
yearli.οnclick=function(){
document.getElementById("month").value=this.innerText;
createCalendar();
leftshow.style.display='none';
}
year_ul.appendChild(yearli);
}

}
function yearminus(){
var leftshow=document.getElementById('leftshow');
var in_y=document.getElementById("yearul").childNodes[0].innerText.replace("年",'');
console.log(in_y);
in_y-=10;
var year_ul=document.getElementById('yearul');
removeChildren(year_ul);
for(var i=0;i<10;i++){
var yearli=document.createElement('li');
yearli.innerText=in_y+i+'年';
yearli.οnclick=function(){
document.getElementById("year").value=this.innerText;
leftshow.style.display='none';
createCalendar();
}
year_ul.appendChild(yearli);
}

}
function yadd(){
var yearin=document.getElementById("year");
var year = document.getElementById("year").value.replace("年","");
year = Number(year)+1;
yearin.value=year+"年";
createCalendar();

}
function yminus(){
var yearin=document.getElementById("year");
var year = document.getElementById("year").value.replace("年","");
year = Number(year)-1;
yearin.value=year+"年";
createCalendar();
}
function madd(){
var monthin=document.getElementById("month");
var month=monthin.value.replace("月","");
month=Number(month);
if(month==12)
{
month=1;
}else{
month+=1;
}
monthin.value=month+"月";
createCalendar();

}
function mminus(){
var monthin=document.getElementById("month");
var month=monthin.value.replace("月","");
month=Number(month);
if(month==1)
{
month=12;
}else{
month-=1;
}
monthin.value=month+"月";
createCalendar();

}
function yearadd(){
var leftshow=document.getElementById('leftshow');
var in_y=document.getElementById("yearul").childNodes[0].innerText.replace("年",'');
console.log(in_y);
in_y=Number(in_y);
in_y+=10;
var year_ul=document.getElementById('yearul');
removeChildren(year_ul);
for(var i=0;i<10;i++){
var yearli=document.createElement('li');
yearli.innerText=in_y+i+'年';
yearli.οnclick=function(){
document.getElementById("year").value=this.innerText;
leftshow.style.display='none';
createCalendar();
}
year_ul.appendChild(yearli);
}




}
function createCalendar(){
var year=document.getElementById("year").value.replace("年","");
var month=document.getElementById("month").value.replace("月","");
var calend =document.getElementById('calendar');
removeChildren(calend);
var tr_title=document.createElement('tr');
var titles=['日','一','二','三','四','五','六'];
for(var m=0;m<titles.length;m++){
var td_title=document.createElement('td');
td_title.innerText=titles[m];
tr_title.appendChild(td_title);
}
calend.appendChild(tr_title);
year=Number(year);
month=Number(month)-1;
var nstr=new Date(year,month,1); //当前Date资讯
var firstday=nstr.getDay();//星期几 
var m_days=new Array(31,28+is_leap(year),31,30,31,30,31,31,30,31,30,31); //各月份的总天数
var tr_str=Math.ceil((m_days[month] + firstday)/7); //表格所需要行数
for(i=0;i<tr_str;i++) { //表格的行
  var tr=document.createElement("tr");
            for(k=0;k<7;k++) { //表格每行的单元格
    var td=document.createElement("td");
      idx=i*7+k; //单元格自然序列号
      date_str=idx-firstday+1; //计算日期
      (date_str<=0 || date_str>m_days[month]) ? date_str="" : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的）
td.innerText=date_str;
// if(date_str!='')
// {
// var f_ds=formatDate(date_str);
// for(var n=0;n<jsonData.data2.length;n++)
//                             {
//                             if(f_ds==jsonData.data2[n])
//                             {
//                             td.className='have';
//                             td.οnclick=function(){
//                                 var f_d=formatDate(this.innerText);
//                                 createDataTable(f_d);
// }
//                             }
//                             }
//
// }
tr.appendChild(td);
   }
calend.appendChild(tr);
}
}
function is_leap(year) { 
   return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
} //是否为闰年
createCalendar();
</script>
</body>
</html>

饼小干小蘑菇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯原生js实现table表格的增删
11-30
这个场景中，实习生提出的问题是如何使用纯原生JS来完成这个功能，主要涉及到DOM操作、事件处理以及浏览器兼容性。 首先，我们需要一个基本的HTML结构来展示表格和操作按钮。在提供的代码中，我们看到一个包含创建...
纯原生js实现贪吃蛇游戏
12-02
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</...
javascript-----与原生js相关的重要整理，原生基础
Seeyoucm
04-15 564
原生js相关的重要整理，原生基础
JavaScript——原生JS基础
最新发布
2401_84091321的博客
04-07 932
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！[外链图片转存中…(img-QgZqNSon-1712426794661)]
纯原生JS打造轮播图？
世界和我们都不该止步于此
04-19 304
目录 第一步:自己封装一个轮播图动画（缓动动画） 第二步：构建HTMLUI页面 第三步：Less书写（CSS） 第四步：JS书写与调用 第一步:自己封装一个轮播图动画（缓动动画） //Obj 对象 //targetleft 移动距离 //callback 回调函数 function getAnimal(obj,target,callback){ clearInterval(obj.timer) obj.timer = setInterval( (..
纯原生js实现移动端轮播图,纯原生js 纯原生js 纯原生js !!!
laihaodong的博客
07-05 1609
首先是html:  代码如下&lt;div class="carousel" id="carousel"&gt; &lt;div class="imageList"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/
js深拷贝，纯原生
weixin_47721719的博客
04-22 70
js基础，js深拷贝，递归实现深拷贝
JavaScript原生数组函数探索WORD版
07-22
资源名称：JavaScript原生数组函数探索 WORD版内容简介：本文档主要讲述的是Javaｓｃｒｉｐｔ原生数组函数探索；在Javaｓｃｒｉｐｔ中，可以通过两种方式创建数组，构造函数和数组直接量， 其中后者为首选方法。希望...
纯原生js无限瀑布流
09-01
在纯原生JavaScript实现无限瀑布流的过程中，主要涉及到以下几个关键知识点： 1. **元素尺寸计算**：瀑布流的关键在于元素的宽度和高度计算。由于元素的宽度通常是固定的，高度则需要根据相邻元素的位置进行动态...
原生JS(JavaScript)
断肠人在刷牙〃的博客
08-06 8107
JS 是JavaScript的简述 JS基于对象和事件驱动脚本语言，作用在浏览器上 JS的事件 onsubmit 主要用于表单的提交，绑定的位置在form标签里面，要有返回标记，如果提交的数据校验未通过，不允许表单提交 onload 用于页面加载的时候使用的事件，绑定的位置在body标签里，也可以用window.οnlοad=function(){} onclick/ondblclick 主要用于鼠标点击事件，常见的有按钮、图片、文字、超链接等等 onfocus/onblur 聚焦离焦事件，主要用
使用纯原生JS实现日历
weixin_34129696的博客
06-17 646
废话不多说，该有的注释都在代码里了；直接上代码： HTML: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
JS原生方法-合集
ngd-b的博客
10-31 864
元素使用可通过连接查看： http://jsrun.net/c8hKp/edit 1. Element.insertAdjacentHTML 之前一直使用：innerHTML 将指定文本解析为HTML或XML，插入到指定DOM节点中。不会重新解析正在使用的元素，因此比innerHTML操作更快。 使用：element.insertAdjacentHTML(position,text), po...
纯原生js日历
lanseyuanwei2的博客
07-19 1810
原生js日历 效果图如下 代码如下： .left { width: 0px; height: 0px; border-top: 8px solid transparent; border-right: 8px solid #3081C2; border-bottom: 8px solid transparent; border-left:
如何让ul在div中垂直居中
热门推荐
lanseyuanwei2的博客
06-30 1万+
将父级div的display设置为table-cell vertical-align设置为middle
如何让div自动适应内容宽度，并且居中
lanseyuanwei2的博客
07-12 8778
将内层div的display设置为table cell能确保div的宽度适应内容的宽度。 将外层div的display设置为table，text-align设置为center，即可保证内层div居中显示 代码如下 .text{ background-color: blanchedalmond; width: 5em; text-align: right; margin: 0px au
或取offsetHeight值不正确
lanseyuanwei2的博客
06-29 8056
代码如下 最新资讯 大数据驱动下的微博社会化推荐 Unity全球领袖齐聚 Unite2016Shanghai精彩议题公布 网站安全检查渐成常态，盛邦安全带... var left = document.getElementById("content"); console.log("高度- - - - - - ->"+left.offsetHe
设置absolute后元素宽度问题
lanseyuanwei2的博客
07-11 7031
当父级元素position设置为absolute后，宽度以子元素内容的宽度一致，所有包含的块级元素的宽度与最宽的子元素宽度一致。
原生js控制div的显示与隐藏
lanseyuanwei2的博客
07-05 2895
通过 var obj = document.getElementbyId("obj"); var displays=obj.style.display 无法获取到写在css样式表中的display值，均为空值 必须通过其他方法获得 function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle
苹果手机无法识别hover的解决方案
lanseyuanwei2的博客
07-12 2053
在html页面后面加上 var mobileHover = function () {     $('*').on('touchstart', function () {         $(this).trigger('hover');     }).on('touchend', function () {         $(this).trigger('hover');    
原生Javascript
05-28
原生 JavaScript 是指使用 JavaScript 语言本身提供的 API 和功能来实现功能和交互，而不依赖任何第三方库或框架。 原生 JavaScript 具有以下优点： 1. 轻量级：原生 JavaScript 代码比使用第三方库或框架的代码更轻量级，加载速度更快，减少了项目的依赖和复杂度。 2. 更好的性能：原生 JavaScript 能够更好地控制代码的执行过程，避免使用第三方库或框架所带来的性能损失。 3. 更好的浏览器兼容性：原生 JavaScript 的 API 在各种浏览器中是通用的，而使用第三方库或框架时可能会出现兼容性问题。 4. 更容易理解和维护：原生 JavaScript 代码更加简单和直观，易于理解和维护。 在实际开发中，我们可以使用原生 JavaScript 来实现各种功能和交互，如 DOM 操作、事件处理、表单验证、Ajax 请求等等。同时，如果需要使用第三方库或框架，也可以在原生 JavaScript 的基础上进行扩展和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值