js中的小案例(一)
效果图:
html代码:
<div id="date">
<p>
<span id="prev">上一月</span>
<span id="year">2022</span>
<span id="next">下一月</span>
</p>
<h5 id="month">七月</h5>
<ul id="title">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="days"></ul>
</div>
css代码:
*{
margin: 0px;
padding: 0px;
}
#date{
width: 300px;
padding: 10px;
border: 1px solid #000000;
}
#date>p{
display: flex;
}
#date>p>span{
display: inline-block;
width: 100px;
text-align: center;
}
#month{
text-align: center;
font-weight:;
}
#title{
list-style: none;
display: flex;
width: 300px;
padding:;
margin:; }
#title>li{
flex:;
text-align: center;
width: 100%;
background: #C0C0C0;
}
#days{
height: 250px;
margin-top: 10px;
} #days>li{
list-style: none;
text-align: center;
float: left;
width: 42.28px;
height: 42.28px;
}
.active{
color:orange;
}
javascript代码:
let date=new Date();
add();
function add(){ let year=date.getFullYear()
document.getElementById("year").innerText=year
let month=date.getMonth();
let monthArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
document.getElementById("month").innerText=monthArr[month];
// 获取当天的天数
let currentDay=date.getDate()
// 获取每个月的第一天是周几
let week=new Date(year,month,1).getDay();
let html=""
// 代表前面空白的li标签
for(var i=0;i<week;i++){
console.log(i)
html+="<li></li>"
}
// 获取每个月的天数的最后一天
let lastDay=new Date(year,month+1,0).getDate()
for(var i=1;i<=lastDay;i++){
if(i==currentDay){
html+=`<li class="active">${i}</li>`
}else{
html+=`<li>${i}</li>`
}
}
document.getElementById("days").innerHTML=html
}
document.getElementById("prev").onclick=function(){
date.setMonth(date.getMonth()-1)
add();
}
document.getElementById("next").onclick=function(){
date.setMonth(date.getMonth()+1)
add();
}
关键代码是
new Date(year,month,1).getDay() 获取每个月的第一个天是星期几
new Date(year,month+1,0).getDate() 获取每个月的最后一天是几号
js中的小案例(一)的更多相关文章
- js中OOP小指南
js中OOP小指南 在指南中,我将尝试解析以面向对象规范聚焦的es6的新特性. 首先, 什么是设计模式 范例是某个事务的例子或模型,在某种情况下,按照一种模式创建了计算机程序. 什么是面向对象 显然你 ...
- js中的经典案例--简易万年历
js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- (网页)JS中的小技巧,但十分的实用!
转自CSDN: 1.document.write(”"); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4. ...
- JS高级---沙箱小案例
沙箱小案例 substr截取, 从指定的字段开始截取 (function () { var str="小白喜欢小黑"; str=str.substr(2); console.log ...
- JS高级---闭包小案例
闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 conso ...
- Hibernate中事务小案例
理论知识: 什么是事务? 指作为单个逻辑工作单位执行的一系列操作,要么完全的执行,要么完全不执行.事务处理可以确保非事务性单元内的所有操作都完全完成,否则永久不会更新面向数据的资源.通过将一组操作组合 ...
- 总结下常用js中的小语法和技巧
1,数组对象遍历 对一个级数对象进行遍历,取出每个值 var arr={ "result":[ {"time":"2018-10-24 12:12:1 ...
- Angular.js路由 简单小案例
代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...
- 学习JS中的小问题
1.如果载入的2个js文件中有重名函数,那么调用的时候怎么分别调? 第二个文件载入无效. 2.checkbox jQuery对象的checked属性在选中时为checked,否则为undefined: ...
随机推荐
- 高德局部刷新标记点,bug解决
将接口返回的经纬集合点在高德地图上标记展示, 如果实时刷新地图标记点,不加优化,则会造成过多的带宽消耗 所以,地图只需加载一次,局部更新标记点就好了 代码: <template> < ...
- Web前端开发必不可少的9个开源框架
大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一. ...
- 打印js对象内容
function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; desc ...
- webug3.0靶场渗透基础Day_2(完)
第八关: 管理员每天晚上十点上线 这题我没看懂什么意思,网上搜索到就是用bp生成一个poc让管理员点击,最简单的CSRF,这里就不多讲了,网上的教程很多. 第九关: 能不能从我到百度那边去? 构造下面 ...
- 探索ORACLE之ASM概念(完整版)
探索ORACLE之ASM概念(完整版) 本文出自https://www.jb51.net/article/43527.htm ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出 ...
- Spring Boot中的Properties
文章目录 简介 使用注解注册一个Properties文件 使用属性文件 Spring Boot中的属性文件 @ConfigurationProperties yaml文件 Properties环境变量 ...
- 有关for循环的一些东西
有的时候,不知道是因为学的有点浅显,还是脑袋有点懵,简单的循环语句都有点被绕糊涂了. 这种内外循环的,先是外循环一次,内循环全部,接着再外循环第二次,内循环全部,,,,,,,. 所以先是显示 0 4 ...
- HTML(表格标签)
<table> 标签 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义) ...
- Python爬虫(一)爬百度贴吧
简单的GET请求: # python2 import urllib2 response = urllib2.urlopen('http://www.baidu.com') html = respons ...
- 如何将PHP7达到最高性能
PHP7 VS PHP5.6 1. Opcache 记得启用Zend Opcache, 因为PHP7即使不启用Opcache速度也比PHP-5.6启用了Opcache快, 所以之前测试时期就发生了有人 ...