摘要:原生日历日历一月二月三月四月五月六月七月八月九月十月十一月十二月记住要从后往前删,因为方法会实时改变原有的索引上一月下一月日一二三四五六失效问题解决方式可以给父容器一个这会导致留白可以
原生日历
日历 - *{
- margin:0;
- padding:0;
- list-style:none;
- }
- #out{
- position: absolute;
- width: 300px;
- height: 300px;
- /*border: 1px solid black;*/
- /*background: lightgreen;*/
- top: 100px;
- left:500px;
- }
- #calendar{
- margin: 25px auto;
- width: 252px;
- height: 255px;
- background: white;
- border: 1px solid black;
- font-size: 12px;
- font-family: Arial;
- box-shadow: 5px 5px 5px green outset;
- }
- #calendar .top{
- height:45px;
- width:100%;
- }
- #calendar .top span{
- display:block;
- width:84px;
- height: 23px;
- line-height:23px;
- float:left;
- text-align:center;
- }
- #calendar .top span a{
- text-decoration: none;
- }
- #calendar .top span a:hover{
- color:blue;
- }
- #calendar .top h4{
- width: 100%;
- height: 19px;
- text-line: center;
- line-height: 19px;
- float:left;
- text-align:center;
- }
- #calendar .list ul{
- width: 100%;
- height: 100%;
- }
- #calendar .list ul .week{
- width: 36px;
- height: 30px;
- line-height: 30px;
- float: left;
- text-align:center;
- background-color:#ccc;
- }
- #calendar .list ul .day{
- background-color:white;
- }
- var months = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
- window.onload = function(){
- var iDate = new Date();
- var yearBox = document.getElementById("year");
- var monthBox = document.getElementById("month");
- var day = iDate.getDate();
- yearBox.innerHTML = iDate.getFullYear();
- monthBox.innerHTML = months[iDate.getMonth()];
- createList(iDate);
- doMark(day);
- }
- function doMark(day){
- var addBox = document.getElementById("add");
- var lis = addBox.children;
- for(var i=lis.length - 1;i > 6;i--){
- if(lis[i].innerHTML == day){
- lis[i].style.cssText = "background-color:lightgreen;border-radius:10px;";
- break;
- }
- }
- }
- function nextMonth(){
- var yearBox = document.getElementById("year");
- var monthBox = document.getElementById("month");
- var index = getIndex(monthBox);
- if(index == 11){
- yearBox.innerHTML = parseInt(yearBox.innerHTML) + 1;
- }
- var next = (++index) % (months.length);
- monthBox.innerHTML = months[next];
- var date = new Date();
- date.setYear(parseInt(yearBox.innerHTML));
- date.setMonth(next);
- removeList();
- createList(date);
- }
- function lastMonth(){
- var yearBox = document.getElementById("year");
- var monthBox = document.getElementById("month");
- var index = getIndex(monthBox);
- if(index == 0){
- yearBox.innerHTML = parseInt(yearBox.innerHTML) - 1;
- }
- var last = (--index + months.length) % (months.length)
- monthBox.innerHTML = months[last];
- var date = new Date();
- date.setYear(parseInt(yearBox.innerHTML));
- date.setMonth(last);
- removeList();
- createList(date);
- }
- function getIndex(monthBox){
- for(var i = 0;i < months.length;i++){
- if(months[i] == monthBox.innerHTML)
- return i;
- }
- }
- Date.prototype.getMonthDays = function(){
- var iDate = new Date();
- iDate.setYear(this.getFullYear());
- iDate.setMonth(this.getMonth() + 1);
- iDate.setDate(0);
- return iDate.getDate();
- }
- function createList(date){
- var days = date.getMonthDays();
- date.setDate(1);
- var fir = date.getDay();
- var liNums = fir + days;
- var addBox = document.getElementById("add");
- for(var i = 0;i < liNums;i++){
- var liBox = document.createElement("li");
- liBox.className = "week day";
- if(i >= fir){
- liBox.innerHTML = (i- fir + 1);
- }
- addBox.appendChild(liBox);
- }
- }
- function removeList(){
- var addBox = document.getElementById("add");
- var lis = addBox.children;
- //记住要从后往前删,因为removeChild方法会实时改变原有的索引
- for(var i=lis.length - 1;i > 6;i--)
- addBox.removeChild(lis[i]);
- }
上一月
2025
下一月
六月
- 日
- 一
- 二
- 三
- 四
- 五
- 六
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
margin-top失效问题
解决方式:可以给父容器一个border(这会导致留白);可以给父容器设置overflow:hidden;内容器可以改用padding-top
removeChild删除节点时的删不干净问题
在js中使用removeChild删除节点时,要倒着删除(如在ul里删除所有的li节点时),因为removeChild方法会实时更新索引值。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96668.html
摘要:原生日历日历一月二月三月四月五月六月七月八月九月十月十一月十二月记住要从后往前删,因为方法会实时改变原有的索引上一月下一月日一二三四五六失效问题解决方式可以给父容器一个这会导致留白可以 原生日历 showImg(https://segmentfault.com/img/bVbeUKf?w=1346&h=785); 日历 *{ margin:0; padding...
摘要:原生日历日历一月二月三月四月五月六月七月八月九月十月十一月十二月记住要从后往前删,因为方法会实时改变原有的索引上一月下一月日一二三四五六失效问题解决方式可以给父容器一个这会导致留白可以 原生日历 showImg(https://segmentfault.com/img/bVbeUKf?w=1346&h=785); 日历 *{ margin:0; padding...
摘要:主要是为了避免用户修改了手机日历之后,获取的本地与服务器时间不统一可以通过获取服务器时间进行手动设置。日历控件更新之后哦调用只有在调用了的时候才会被触发非必填。对于设备已经通过阻止冒泡事件进行控制不需要再做控制。 原文链接 使用 引入文件: ./build/css/iantooweek.css ./build/js/iantooweek.js 并在页面上调用: iantoo.week(...
摘要:一周有天,返回的数,如果上月最后一天是星期二,看下的日历是补了三天,我们得到的是,所以为此,之后就是填充最后一天,用处理一下再排序,上一个月的数据就得到了。 每天进步一点点。写个简单的小日历,依旧用vue,方便 完成图 showImg(https://segmentfault.com/img/bVZoWs?w=416&h=495); 思路 本月的天数 截取上月的天数 截取下月天数 今...
阅读 2238·2021-09-22 15:54
阅读 1960·2021-09-04 16:40
阅读 1001·2019-08-30 15:56
阅读 2745·2019-08-30 15:44
阅读 2268·2019-08-30 13:52
阅读 1242·2019-08-29 16:35
阅读 3459·2019-08-29 16:31
阅读 2682·2019-08-29 13:48