用html实现一个日历便签设计

news/2024/6/16 10:18:55/文章来源:https://blog.csdn.net/liulang68/article/details/137152082

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>日历便签设计</title><link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'><link href="https://fonts.googleapis.com/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='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.8.2/angular-animate.js'></script><script  src="./script.js"></script></body>
</html>
(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();}})();
* {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);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1033318.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA2023使用手册 【持续更新...】

IDEA介绍 IDEA官网&#xff1a;https://www.jetbrains.com.cn/idea/IDEA 2023.2.2下载地址&#xff1a;https://download.jetbrains.com/idea/ideaIU-2023.2.2.exe对第三方软件的支持&#xff1a;https://www.jetbrains.com/legal/third-party-software/?productiiu&versi…

docker基础学习指令

文章目录 [toc] docker基础常用指令一、docker 基础命令二、docker 镜像命令1. docker images2. docker search3. docker pull4. docker system df5. docker rmi1. Commit 命令 三、 docker 容器命令1. docker run2. docker logs3. docker top4. docker inspect5. docker cp6. …

15 - grace序列处理 - 十三点滑动平均法

grace序列处理 -十三点滑动平均法 滑动平均是一种常用的平滑数据的方法,可以用于去除噪声或者提取趋势。十三点滑动平均是指使用窗口大小为13的滑动平均,应用于GRACE序列处理中可以去除周年项的影响。 十三点滑动平均的计算公式为: y [ n ] = ( x [ n − 6 ]

android APP monkey 测试

monkey 测试 一、电脑ADB安装及使用详解1、什么是 Monkey 测试2、什么是ADB3、ADB的作用4、安装前提条件5、ADB下载6、ADB安装与配置 二、连接安卓手机检查是否连接上安卓手机windows端安装ADB驱动 三、 monkey测试操作指令演示指令APP包名查看方式测试效果 一、电脑ADB安装及使…

pygame 3d三角形沿y轴旋转后 透视投影在屏幕上

import pygame from pygame.locals import * import sys import mathpygame.init()width, height 800, 600 screen pygame.display.set_mode((width, height))vertices [(0, 100, 1), (100, 200, 0), (300, 100, 1)]angle 0 rotation_speed 2 # 可根据需要调整旋转速度 c…

redis系列之踩坑:\xAC\xED\x00\x05t\x00\x08乱码问题

> 插&#xff1a;AI时代&#xff0c;程序员或多或少要了解些人工智能&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家…

尾矿库在线安全监测:提升矿山安全水平

在矿山安全领域&#xff0c;尾矿库的安全管理尤为关键。尾矿库作为矿山生产链条的重要环节&#xff0c;其稳定性不仅关系到生产活动的持续进行&#xff0c;更直接影响着周边环境和人民群众的生命财产安全。因此&#xff0c;尾矿库的安全监测显得尤为重要。近年来&#xff0c;随…

AcWing刷题-游戏

游戏 DP l lambda: [int(x) for x in input().split()]n l()[0] w [0] while len(w) < n:w l()s [0] * (n 1) for i in range(1, n 1): s[i] s[i - 1] w[i]f [[0] * (n 1) for _ in range(n 1)]for i in range(1, n 1): f[i][i] w[i]for length in range(2, …

简介:商业BRD+市场MRD=产品PRD

前言 产品需求文档Product Requirements Document,PRD是将商业需求文档&#xff08;BRD&#xff09;和市场需求文档&#xff08;MRD&#xff09;用更加专业的语言进行描述。 产品经理对用户价值的体现&#xff0c;产品经理对商业价值的体现&#xff0c;能改变世界的产品经理&…

Quartz.Net详解(定时任务和调度)

http://t.csdnimg.cn/Jinaphttp://t.csdnimg.cn/Jinap

Centos服务器Open Gauss 部署

近期很多的项目由于信创要求使用一些国产的数据库&#xff0c;比如OpenGauss。OpenGuass是华为高斯DB的开源版&#xff0c;内核还是PostgreSQL&#xff0c;商业版是收费的。这里记录一下是如何安装部署 的。 官方中文文档 官方下载地址 部署要求 操作系统要求 ARM&#xff…

docker-compse安装es(包括IK分词器扩展)、kibana、libreoffice

Kibana是一个开源的分析与可视化平台&#xff0c;设计出来用于和Elasticsearch一起使用的。你可以用kibana搜索、查看存放在Elasticsearch中的数据。 Kibana与Elasticsearch的交互方式是各种不同的图表、表格、地图等&#xff0c;直观的展示数据&#xff0c;从而达到高级的数据…

电梯四种事故检测YOLOV8

电梯四种事故检测&#xff0c;采用YOLOV8训练得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV调用&#xff0c;支持C/PYTHON/ANDORID开发 电梯四种事故检测YOLOV8

一个问题串联 Java 的几个基础知识

前言 关于 “” 和 equals() 的区别这个问题&#xff0c;我之前一直搞的很乱&#xff0c;虽然面试的时候一直没有被问到&#xff0c;但是我感觉这种是属于最基础的知识&#xff0c;如果不懂好像不是很好。后来我发现通过这个问题&#xff0c;可以串联起很多的知识点&#xff0…

Flutter仿Boss-2.启动页、引导页

简述 在移动应用开发中&#xff0c;启动页和引导页是用户初次接触应用时的重要组成部分&#xff0c;能够提升用户体验和导航用户了解应用功能。本文将介绍如何使用Flutter实现启动页和引导页&#xff0c;并展示相关代码实现。 启动页 启动页是应用的第一个页面&#xff0c;首…

Mac电脑Jmeter集成到Jenkins,压测多个接口并生成测试报告

Jenkins支持的JDK版本17、21&#xff0c;通过java -version查看当前JDK版本&#xff0c;确认是否匹配 打开网址https://www.jenkins.io/download 点击下载&#xff0c;选择mac版本 commend空格打开终端&#xff0c;输入安装命令brew install jenkins 安装完成后输入brew servi…

Github 2024-04-01 开源项目月报 Top20

根据Github Trendings的统计,本月(2024-04-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目9TypeScript项目2非开发语言项目2Jupyter Notebook项目2HTML项目1CSS项目1C#项目1Shell项目1Lua项目1JavaScript项目1C项目1Java项目…

【二叉树】Leetcode 437. 路径总和 III【中等】

路径总和 III 给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。 路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下的&#xff08;只能从父节…

Qt加载.css/.qss文件设置控件的QSS样式(支持程序运行时修改且立即生效类似换肤效果)

初学Qt时&#xff0c;你是如何设置QWidget&#xff0c;QPushButton等原生基础控件的样式的&#xff1f;是不是主要是两种方法&#xff1f; 1.直接在可视化的.ui文件中直接添加qss语句。 2.在代码中通过setStyleSheet(QString qss)来设置qss语句。 上述两种方法&#xff0c;在程…

深度思考:雪花算法snowflake分布式id生成原理详解

雪花算法snowflake是一种优秀的分布式ID生成方案&#xff0c;其优点突出&#xff1a;它能生成全局唯一且递增的ID&#xff0c;确保了数据的一致性和准确性&#xff1b;同时&#xff0c;该算法灵活性强&#xff0c;可自定义各部分bit位&#xff0c;满足不同业务场景的需求&#…