我不知道将去何方，但我已经在路上。
——《千与千寻》
目录
一、前言
二、往期作品回顾
三、作品介绍
四、本期代码介绍
五、效果显示
六、编码实现
index.html
style.css
script.js
七、获取源码
公众号获取源码
获取源码？私信？关注？点赞？收藏？
一、前言
在我们的 html 学习过程中，会用到并见识到各种各样的实例，以及各种插件，并且有些 web 网页中的小插件又非常的吸引眼球，提升 web 网页的层次，显得非常好看并且非常使用。在本系列中，我将持续为大家更新有趣且使用的 html 实例，放在 web 网页中，凸显效果。
特点一：都是符合学校或者学生考试期末作业的水平，都是最基础的简单的 html 样例，提升web网页整理效果，都是 div+css 框架原创代码写的，内容包括 js / css，也包含视频+音乐+flash 等元素的插入…
特点二：内容包括多种丰富类型，例如：倒计时，404页面，Blog顶置卡片设计 (css+js)，To-Do-List设计 (css+js)，火柴盒动画 (css)，日历便签设计 (css+js)，搜索框设计 (css+js)，卡片式图片展示 (css+js)，咖啡选择 (css+js)……
可满足多种需求，欢迎大家下载！
二、往期作品回顾
有趣的HTML实例（一） 倒计时_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（二） 404页面_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（三） 加载页面动画_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（四） 旋转菜单_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（五） 加载页面动画Ⅱ（css）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（六） 卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（七） 注册登录界面Ⅱ（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（八） 一个很有趣的动态背景（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（九） 文本变形动画（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（十） 悬停时有旋转效果的图标_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（十一） 烟花特效（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（十二） 早安、晚安动画（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（十三） 咖啡选择（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（十四） 窗边风景动画（css+js）_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（十五） 注册登录界面（css+js）_Enovo_飞鱼的博客-CSDN博客
三、作品介绍
1.作品简介：HTML响应式布局网站源码！兼容 pc 以及移动端，内涵 js 交互，ui 交互。直接点击即可查看效果！
2.作品编辑：个人主页网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）。
3.作品技术：使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。
四、本期代码介绍
一款简单的 HTML+CSS+JS 咖啡选择（css+js） 实例
1、HTML
2、CSS
3、JS
4、舒适的画面感
5、日历便签设计
可通用多种不同情景，放置在web网页上，可以作为跳转页面之后使用
五、效果显示
可使用在多种情景下，提升层次轮廓效果、美化界面、自定义文字修改——>
根据需求修改
六、编码实现
显示完整代码
注意路径(⊙o⊙)？
o(*￣▽￣*)ブ
index.html
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>Enovo日历便签设计</title><link href='/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'><link href="/icon?family=Material+Icons"rel="stylesheet"><link rel="stylesheet" href="./style.css"></head><body><html ng-app='calendarApp' ng-cloak='true'></html><div class='calendar' ng-controller='calendarController as calendar'><div class='calendar_left'><div class='header'><i class='material-icons' ng-click='calendar.prev()'>navigate_before</i><h1>{{calendar.month}}</h1><i class='material-icons' ng-click='calendar.next()'>navigate_next</i></div><div class='days'><div class='day_item'>Mon</div><div class='day_item'>Tue</div><div class='day_item'>Wed</div><div class='day_item'>Thu</div><div class='day_item'>Fri</div><div class='day_item'>Sat</div><div class='day_item'>Sun</div></div><div class='dates'></div></div><div class='calendar_right'><div class='list'><ul><li class='bounce-in' ng-repeat='events in calendar.events' ng-show='events.id === calendar.dataId'><span class='type'>It's a {{ events.type }} thing -</span><span class='description'>{{ events.description }}</span></li></ul></div><form ng-submit='calendar.add()'><input ng-model='calendar.description' placeholder='Enter a task for this day' type='text'><select ng-model='calendar.type' placeholder='calendar.type'><option value='Social'>Social</option><option value='Work'>Work</option></select></input></form></div></div><!-- partial --><script src='/ajax/libs/angular.js/1.8.2/angular.min.js'></script><script src='/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='/1.8.2/angular-animate.js'></script><script src="./script.js"></script></body></html>
style.css
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Montserrat", sans-serif;}html, body {background: #f7f8fb;}.calendar {display: flex;justify-content: center;align-items: center;height: 100vh;}.calendar_left {background: linear-gradient(#c4f185, #86d2f3);width: 400px;height: 415px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;padding: 1.5em;z-index: 1;}.calendar_left .header {display: flex;justify-content: space-around;margin-bottom: 2em;color: #FFF;font-size: 0.7em;}.calendar_left .header h1 {line-height: 1em;}.calendar_left .header i {cursor: pointer;}.calendar_right {background: linear-gradient(#c4f185, #86d2f3);width: 350px;height: 415px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;position: relative;transform: scale(0.95) translateX(-10px);z-index: 0;}.calendar_right .list {height: 351px;overflow-y: scroll;padding: 1em;}.calendar_right .list ul {padding: 2.25em;}.calendar_right .list li {padding: 1em;width: 180px;color: #FFF;transform: translateX(-700px);}.calendar_right .list .description {font-size: 12px;}.calendar_right form {position: absolute;bottom: 0;display: flex;width: 100%;display: flex;flex-flow: row wrap;}.calendar_right input {background: #68c9f0;border: none;padding: 1.2em;flex: 2;outline: none;color: #FFF;border-bottom-right-radius: 5px;}.calendar_right select {background: #5d97ad;border: none;padding: 1.2em;outline: none;color: #FFF;border-top-left-radius: 0;border-top-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 5px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.days {display: flex;justify-content: flex-start;width: 400px;}.days .day_item {color: #FFF;width: 50px;text-align: center;padding-bottom: 1em;}.dates {display: flex;justify-content: flex-start;flex-flow: row wrap;width: 350px;}.dates .date_item {color: #FFF;width: 50px;text-align: center;height: 50px;padding: 1em;cursor: pointer;border-radius: 100%;}.present {background: #FFF;transform: scale(0.7);border-radius: 50px;padding: 0.95em !important;color: #6bc5e9 !important;z-index: 0;box-shadow: 10px 10px 5px #7acbeb;-webkit-animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}::-webkit-scrollbar {display: none;}::-webkit-input-placeholder {color: #FFF;}.bounce-in.ng-animate {-webkit-animation: none 0s;animation: none 0s;}.bounce-in {-webkit-animation: bounce-in 0.9s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;animation: bounce-in 0.9s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}@-webkit-keyframes bounce-in {50% {transform: translateX(0);}75% {transform: translateX(7px);}100% {transform: translateX(2px);}}@keyframes bounce-in {50% {transform: translateX(0);}75% {transform: translateX(7px);}100% {transform: translateX(2px);}}@-webkit-keyframes bounce-button-in {0% {transform: translateZ(0) scale(0);}100% {transform: translateZ(0) scale(0.7);}}@keyframes bounce-button-in {0% {transform: translateZ(0) scale(0);}100% {transform: translateZ(0) scale(0.7);}}
script.js
(function() {angular.module('calendarApp', ['ngAnimate']).controller('calendarController', calendarController);function calendarController($scope) {var vm = this,now = new Date(),months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],jan = daysInMonth(1, now.getFullYear()),feb = daysInMonth(2, now.getFullYear()),mar = daysInMonth(3, now.getFullYear()),apr = daysInMonth(4, now.getFullYear()),may = daysInMonth(5, now.getFullYear()),jun = daysInMonth(6, now.getFullYear()),jul = daysInMonth(7, now.getFullYear()),aug = daysInMonth(8, now.getFullYear()),sep = daysInMonth(9, now.getFullYear()),oct = daysInMonth(10, now.getFullYear()),nov = daysInMonth(11, now.getFullYear()),dec = daysInMonth(12, now.getFullYear()),monthRef = [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec],month = now.getMonth(),monthDay = monthRef[now.getMonth()],n = now.getDate(),uidi,uidm,uid;vm.id = now.getDate().toString() + now.getMonth().toString();vm.dataId;vm.events = [];vm.description;vm.type = 'Social';vm.month = months[month];vm.next = next;vm.prev = prev;vm.add = add;// 把日期放在正确的地方function placeIt() {if (month === 0) {$(".date_item").first().css({'margin-left': '200px'})} else if (month === 1) {$("date_item").first().css({'margin-left': '0px'})} else if (month === 2) {$(".date_item").first().css({'margin-left': '150px'})} else if (month === 3) {$(".date_item").first().css({'margin-left': '300px'})} else if (month === 4) {$(".date_item").first().css({'margin-left': '400px'})} else if (month === 5) {$(".date_item").first().css({'margin-left': '200px'})} else if (month === 6) {$(".date_item").first().css({'margin-left': '300px'})} else if (month === 7) {$(".date_item").first().css({'margin-left': '100px'})} else if (month === 8) {$(".date_item").first().css({'margin-left': '250px'})} else if (month === 9) {$(".date_item").first().css({'margin-left': '350px'})} else if (month === 10) {$(".date_item").first().css({'margin-left': '150px'})} else if (month === 11) {$(".date_item").first().css({'margin-left': '250px'})}}// 突出今天function presentDay() {$(".date_item").eq(n - 1).addClass("present");}// 打印当前月份的日期列表function showDays(days) {for (var i = 1; i < days; i++) {var uidi = i;var uidm = month;var uid = uidi.toString() + uidm.toString();$(".dates").append("<div class='date_item' data='" + uid + "'>" + i + "</div>");}}// 获取当前日期function daysInMonth(month, year) {return new Date(year, month, 0).getDate() + 1;}// 下个月function next() {if (month < 11) {month++;$(".dates").html('');vm.month = months[month];monthDay = monthRef[month];showDays(monthDay);placeIt();}}// 前一个月function prev() {if (month === 0) {return false} else {month--;$(".dates").html('');vm.month = months[month];monthDay = monthRef[month];showDays(monthDay);placeIt();}}// 将事件添加到指定日期function add() {vm.events.push({id: vm.id,description: vm.description,type: vm.type});vm.description = "";}// 获取每个日期项的唯一ID$(".dates").on("click", ".date_item", function() {vm.id = $(this).attr('data');vm.dataId = $(this).attr('data');$(this).addClass("present").siblings().removeClass("present");$scope.$apply();});showDays(monthDay);presentDay();placeIt();}})();
七、获取源码
老规矩，先给朋友们看一下完整文件夹，
正确的文件如下图 ，复制源码的朋友们请注意了！！！
公众号获取源码
第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）
第二步，点击 html 文件 打开即可查看
第二十六期，希望得到大家的喜欢🙇
也是新的系列，将会持续更新，🙇
希望大家有好的意见或者建议，欢迎私信
以上就是本篇文章的全部内容了
~ 关注我，点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！「在这里有好多 开发者，一起探讨 前端 开发知识，互相学习」！
3.以上内容技术相关问题可以相互学习，可关 注 ↓公 Z 号获取更多源码 !
获取源码？私信？关注？点赞？收藏？
👍+✏️+⭐️+🙇
有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " a-Cnote"
