js日历事项笔记应用特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

12 44 15



特效描述:日历事项 笔记应用。js日历表添加每日事项内容和更改主题颜色,日历笔记应用功能代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

	<div id="current-day-info" class="color">
		<h1 id="app-name-landscape" class="off-color center default-cursor">
			日历表
		</h1>
		<div>
			<h2 id="current-year" class="center default-cursor">2019</h2>
		</div>
		<div>
			<h1 id="cur-day" class="current-day-heading center default-cursor">
				星期一
			</h1>
			<h1 id="cur-month" class="current-month-heading center default-cursor">
				六月
			</h1>
			<h1 id="cur-date" class="current-date-heading center default-cursor">
				7
			</h1>
		</div>
		<div class="time">
			<span> 22 </span>: <span> 55 </span>:
			<span> 23 </span>
		</div>
		<button id="theme-landscape" class="font btn">更改主题</button>
	</div>
	<div id="calender">
		<h1 id="app-name-portrait" class="center ">日历表</h1>
		<!-- h1 'off-color' class was removed -->
		<table>
			<thead class="color">
				<tr>
					<th colspan="7" class="border-color">
						<h4 id="cal-year" contenteditable="true">2018</h4>
						<div>
							<i class="fas fa-caret-left icon"> </i>
							<h3 id="cal-month">july</h3>
							<i class="fas fa-caret-right icon"> </i>
						</div>
					</th>
				</tr>
				<tr>
					<th class="weekday border-color">日</th>
					<th class="weekday border-color">一</th>
					<th class="weekday border-color">二</th>
					<th class="weekday border-color">三</th>
					<th class="weekday border-color">四</th>
					<th class="weekday border-color">五</th>
					<th class="weekday border-color">六</th>
				</tr>
			</thead>
			<tbody id="table-body">
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="tooltip-container">
						<span class="day">1</span>
						<img src="./images/note1.png" alt="note" />
						<span class="tooltip"> 这是很好的工具提示</span>
					</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
			</tbody>
		</table>
		<button id="theme-portrait" class="font btn">更改主题</button>
	</div>
	<div class="modal">
		<div id="fav-color" hidden>
			<div class="popup">
				<h4>你最喜欢什么颜色?</h4>
				<div id="color-options">
					<div class="color-option">
						<div class="color-preview" id="blue" style="background-color: #1B19CD;">
							<!-- <i class="fas fa-check checkmark"></i> -->
						</div>
						<h5>Blue</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="red" style="background-color: #D01212;"></div>
						<h5>Red</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="purple" style="background-color: #721D89;"></div>
						<h5>Purple</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="green" style="background-color: #158348;"></div>
						<h5>Green</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="orange" style="background-color: #EE742D;"></div>
						<h5>Orange</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="deep-orange" style="background-color: #F13C26;"></div>
						<h5>Deep Orange</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="baby-blue" style="background-color: #31B2FC;"></div>
						<h5>Baby Blue</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="cerise" style="background-color: #EA3D69;"></div>
						<h5>Cerise</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="lime" style="background-color: #36C945;"></div>
						<h5>Lime</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="teal" style="background-color: #2FCCB9;"></div>
						<h5>Teal</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="pink" style="background-color: #F50D7A;"></div>
						<h5>Pink</h5>
					</div>
					<div class="color-option">
						<div class="color-preview" id="black" style="background-color: #212524;"></div>
						<h5>Black</h5>
					</div>
				</div>
				<button id="update-theme-button" class="font btn color">
					更新主题
				</button>
			</div>
		</div>
		<div id="make-note" hidden>
			<div class="popup">
				<h4> <span class="verb"></span> note on <span id="noteDate">2019 12 5</span></h4>
				<input class="note-title" type="text" name="title" placeholder="note title ..." />
				<textarea class="note-content" id="edit-post-it" name="post-it"
					placeholder="note description ..."></textarea>
				<span style="color:red;" id="warning"></span>
				<div>
					<button class="btn font post-it-button" id="add-post-it">
						保存
					</button>
					<button class="btn font post-it-button" id="delete-button">
						删除
					</button>
				</div>
			</div>
		</div>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 页面 右键菜单 时间轴 图片头像上传 文字提示框 日历选择器 文件上传 提示框/弹出层 时间日期插件 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 日历日期时间 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到