[js]html实现日历功能

最新推荐文章于 2021-06-16 20:23:02 发布

still198998

最新推荐文章于 2021-06-16 20:23:02 发布

阅读量794

点赞数 2

分类专栏： js 文章标签： html js css

本文链接：https://blog.csdn.net/w_wstill/article/details/115185420

版权

本文介绍如何利用JavaScript、HTML和CSS技术实现一个基本的日历功能。通过HTML构建布局，CSS进行样式设计，JS负责日历的动态生成和交互逻辑。

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

js html css 日历功能

html

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <link rel='stylesheet' href='外部的css文件路径' />  
  <title>demo</title>
</head>
<body>
  <div class='calendar' id='calendar'></div>
  <script type='text/javascript' src='外部的javascript文件路径'></script>
</body>
</html>

css部分

/* 整体设置 */
*{margin:0px;padding:0px;}

/**
 * 设置日历的大小
 */
.calendar{
  width: 240px;
  height: 400px;
  display: block;
}

/**
 * 设置日历顶部盒子
 */
.calendar .calendar-title-box{
  position: relative;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align:center;
  border-bottom: 1px solid #ddd;
}

/**
 * 设置上个月的按钮图标
 */
.calendar .prev-month {
  position: absolute;
  top: 12px;
  left: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-left: 0px;
  border-top: 6px solid transparent;
  border-right: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
}

/**
 * 设置下个月的按钮图标
 */
.calendar .next-month {
  position: absolute;
  top: 12px;
  right: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-right: 0px;
  border-top: 6px solid transparent;
  border-left: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
}


/* 设置日历表格样式 */
.calendar-table{
  wi

最低0.47元/天解锁文章