js制作简单的日历

离恢

于 2020-12-10 11:51:40 发布

阅读量5.8k

点赞数 7

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

本文链接：https://blog.csdn.net/weixin_46352236/article/details/110949981

版权

前言

自己闲暇时用js写了一个比较简单的日历, 给大家分享下

在这里插入图片描述

一、下面是完整代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>日历</title>
		<style type="text/css">
			*{
   margin: 0;padding: 0;}
			.box{
   line-height: 40px;font-size: 16px;text-align: center;width: 280px;height: 320px; border: 1px #ccc solid;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);color: #000;padding: 20px;}
			.top{
   font-size: 0;}
			.top button{
   width: 25%;display: inline-block;font-size: 16px;}
			.top #month{
   width: 50%;display: inline-block;font-size: 16px;}
			.evrday{
   width: 40px;height: 40px;float: left;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<button type="button" onclick="prev()">上个月</button>
				<div id="month"></div>
				<button type="button" onclick="next()">下个月</button>
			</div>
			<div class="week">
				<div class="evrday">日

最低0.47元/天解锁文章

离恢

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
js制作简单的日历

前言自己闲暇时用js写了一个比较简单的日历, 给大家分享下一、下面是完整代码代码如下（示例）：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>日历</title> <style
复制链接

扫一扫