日历jquery

最新推荐文章于 2024-08-30 20:29:15 发布

Cinsinnova

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量399

点赞数 8

文章标签： javascript html

本文链接：https://blog.csdn.net/EASON198392/article/details/135606458

版权

本文介绍了如何使用HTML、CSS和JavaScript（包括jQuery）创建一个简单的全日历插件，包含日期选择和导航功能。

摘要由CSDN通过智能技术生成

先上效果：

HTML：


<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
2
<!-- 全日历 -->
3
<input type="text" value="" id="output" readonly/>
4
<div id="container">
5
  <a href="javascript:change(-1)">prev</a>
6
  <a href="javascript:change(1)">next</a>
7
  <table id="table">
8
    <thead>
9
      <tr>
10
      <th colspan="7"></th>
11
    </tr>
12
      <tr>
13
       <th>日</th>
14
       <th>一</th>
15
       <th>二</th>
16
       <th>三</th>
17
       <th>四</th>
18
       <th>五</th>
19
       <th>六</th>
20
    </tr>
21
    </thead>
22
    <tbody>
23
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
24
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
25
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
26
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
27
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
28
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
29
    </tbody>
30
    
31
    
32
  </table>
33
</div>

CSS:

input{
2
  background:#eee;
3
  display:block;
4
  cursor:pointer;
5
  position:relative;
6
  border:none;
7
  margin:10px auto;
8
}
9
div{
10
 left:50%;
11
  transform:translateX(-50%);
12
  position:absolute;
13
  border:1px solid #69c;
14
  cursor:pointer;
15
  display:none;
16
}
17
th,td{
18
  width:30px;
19
  height:10px;
20
  text-align:center;
21
  
22
}
23
.select{
24
  background:#69c;
25
  color:white;
26
}

JS:

input{
2
  background:#eee;
3
  display:block;
4
  cursor:pointer;
5
  position:relative;
6
  border:none;
7
  margin:10px auto;
8
}
9
div{
10
 left:50%;
11
  transform:translateX(-50%);
12
  position:absolute;
13
  border:1px solid #69c;
14
  cursor:pointer;
15
  display:none;
16
}
17
th,td{
18
  width:30px;
19
  height:10px;
20
  text-align:center;
21
  
22
}
23
.select{
24
  background:#69c;
25
  color:white;
26
}