前端:运用js制作一个万年历程序

article/2025/10/21 13:36:38

前端:运用js制作一个万年历程序

请添加图片描述

1.HTML代码

首先,依旧是一个套路,先写HTML代码,就好比如建一座楼先建地基和楼的结构一样。
请添加图片描述

  • 请添加图片描述外部这个class属性值为time的div标签是为了让整个内容处于居中地位。

  • 请添加图片描述class属性值为head1的div标签是用于装两个下拉框,既然是万年历,肯定可以看到某年某月的日历啊!两个下拉框分别用于设置年和月(当然其中需要js动态生成)。

  • 请添加图片描述class属性值为head2的div标签用于显示星期,分别为1,2,3,4,5,6,7。

  • 请添加图片描述class属性值为footer的div标签也就是日历部分了,这是用js动态生成的。

  • 请添加图片描述class属性值为cur的div标签主要用于显示当前时间哈!这也需要用到js的哈!

2.CSS样式

关于css样式,小编就主要讲一讲这个class属性为time的div样式和关于日历部分的css样式设置!
为了是整个内容处于居中地位,需要设置一下这个width和height,例外需要设置一下margin属性,如下(小编根据需要设置的哈!):
请添加图片描述
关于日历部分,这个部分是放在class属性值为footer的div标签内部的,里面放一些div标签,div内部的内容为某月的某号,为了使这些div标签能在一行显示7个(一周7天),把这些div标签设置为左浮动,并且大小为宽48px。

  • 为什么是48px呢?350/7=50,而边框设置为1px,也就是48+1+1=50,如果大于48,那么一行肯定会装不下7个,小于的话,除了与周几不匹配之外,界面效果也不怎的好啊!

样式设置如下:
请添加图片描述

3.JS代码

请添加图片描述
小编就讲一下那个点击年或者月的下拉框之后日历内容变化吧!
这主要涉及到js的onchange事件,也就是下拉框内容变化之后会触发的事件,主要涉及到如下这个函数。
请添加图片描述

  • 其中第一个for循环,是产生几个空的div标签,里面没有任何内容,如果某月的1号是周一,那么这个循环0次,如果某月的1号是周一,那么这个for循环1次,依次类推。
  • 第二个for循环,是用于产生日历的内容的。

4.运行结果和运行代码

在这里插入图片描述

代码中有一个导入css样式的代码,如下:
请添加图片描述
这个css文件是去除一些标签的默认样式。比如a标签默认有下划线,导入这个之后就不会有了。
这个css文件可以在网上下载的哈!下载链接为:去除标签默认样式的css代码
请添加图片描述
所有代码已经上传到gitee上,有兴趣的读者可以自行下载,下载链接为:万年历


http://chatgpt.dhexx.cn/article/d9g7YOsM.shtml

相关文章

用Java写一个万年历程序

从控制台输入指定年份(在1900年至2099年之内)和月份,输出当月的日历。要求效果如下图所示 思路分析如下: 假设输出2020年5月份的日历。那么要求得1900年1月1日到2020年5月1日前一天的天数总和 再求总天数余7的值,结果…

C++编写万年历,公元后日历程序,考虑了1582年前后以及该年的特殊情况。

目录 一,万年历的基本要求前言:万年历的创建思路1.公元天数与日期1.日期输入问题2.闰年与平年的数目 3.日历的输出问题1.日数转化为星期2.日历月份开头 二,万年历正确性的额外补丁1.1582年闰年定义的变更解决2.1582年消失的十天 三&#xff0…

C语言 万年历 三种版本

C语言 万年历 万年历 一、第1版: 制作一个万年历(阳历版)。程序从键盘读入年份和月份,然后输出该年该月的月历。 【实现提示】: 本问题的关键是确定所求月份的第一天是星期几。如我们想确定2009年12月1日是星期几&a…

编制万年历的历程

初入编程之道的学子大都试编过万年历。万年历有二种:一为只有西历的月历,另一为有农历对照的月历或日历。编写万年历程序可以练练手,加深对编程语言的理解。记得我初入此道是在1994年,我那时刚买了486电脑,也刚开始有视…

显示万年历的程序(汇编语言实现,附源代码)

运行环境:Masm for Windows 集成实验环境 2015 一、课题内容和要求 课题内容: 用汇编语言编写一个有简单界面显示的日历,要求输入年月日后,将该月的完整日历显示出来,包括星期几,且每月的星期六&#xff…

c语言编写万年历程序

这个程序最核心的地方在于计算当前日期是周几,然后才好显示万年历,因为输入只知道月,所以默认是1号。 通过这个日期我们就可以计算总天数,通过总天数进行%7运算,就能得到周几。 通过这个周几,在结合这个月有…

C语言实现万年历程序

C语言实现万年历程序 #include <stdio.h>int year(int y) {if ((y%40) && (y%100!0) || y%4000)return 366;elsereturn 365; }int main() {int y;int i,j,sum0; int begin,week;int days[12]{31,28,31,30,31,30,31,31,30,31,30,31};scanf("%d",&y)…

C语言实现万年历(附代码) 小白完成的第一个C语言程序,希望大家多多关注,点赞

C语言实现万年历 前言&#xff1a;本文章向大家介绍如何使用C语言代码实现万年历使用实例&#xff0c;讲解编写万年历的方法&#xff0c;教你轻松学会写出万年历。这个小程序算是我自己写的第一个比较完整的小程序&#xff0c;算是对大一上学期学习的C语言程序设计基础的一个总…

万年日历(C语言)

C Language 万年历程序----&#xff08;1840~2110&#xff09;年 ##声明&#xff1a;此程序并非本人全原创&#xff0c;已修改其中少数内容&#xff0c;仅供小白参考&#xff0c;大佬者若言论&#xff0c;来吧&#xff0c;用点力——后续本人将更新此万年历添加更有丰富的内容…

C语言万年历程序

刚复习了C语言&#xff0c;写一个万年历程序&#xff0c;比较初级&#xff0c;见笑了。 /*Name : calendar.cAuthor : 飞翔de猪油Version : v1.0Description : 万年历程序*/#include <stdio.h> #include <stdlib.h> #include <string.h> #in…

面向对象程序设计实训——万年历

设计内容&#xff1a; 1.运用程序设计基础基本知识&#xff0c;使用C、Java或Python等面向对象程序设计语言&#xff0c;按以下要求编程实现万年历的功能&#xff1a; (1)输入任一年&#xff0c;判断该年是否为闰年&#xff1b; (2)输入年月日计算该日为星期几&#xff0c;…

Qt项目简单贪吃蛇代码

目录 第一个界面 第二个界面 第一个界面 在.pro文件里添加sql QT core gui sql 点击.ui文件添加组件 类和对象如图所示&#xff0c;右键MianWindow->改变样式表&#xff0c;在编辑样式表里添加代码改变按钮样式 QPushButton{border:2px solid #7b7b7b; //按钮…

贪吃蛇php代码下载,C语言贪吃蛇代码

C语言编写贪吃蛇源代码&#xff0c;简单易懂&#xff0c;文件为VC源代码&#xff0c;附txt代码和源代码程序。 相关软件软件大小版本说明下载地址 c语言编写贪吃蛇源代码&#xff0c;简单易懂&#xff0c;文件为VC源代码。如果你正在学习c语言&#xff0c;就来下载吧。很经典的…

Html/Javascript snake game 贪吃蛇游戏(附全部代码)

以前用pyhton 做了贪吃蛇游戏&#xff0c; 这里发表的是html/javascript 版本。难度差不多&#xff0c; 区别是python 主要用class, 而javascript 主要用function &#xff0c; 他们的功能很相似&#xff0c; 写法稍微有些不同。内容大致是&#xff1a; 1. 蛇由蛇头&#xff0…

实验二.贪吃蛇的设计

目录 一.实验内容&#xff1a; 二.贪吃蛇的代码实现 &#xff08;1&#xff09;类的声明 &#xff08;2&#xff09;初始化界面 &#xff08;3&#xff09;游戏界面 &#xff08;4&#xff09;蛇的位置 &#xff08;5&#xff09;键盘监听 &#xff08;6&#xff09;更…

Python贪吃蛇 (完整代码+详细注释+粘贴即食)

文章目录 代码运行截图笔记补充参考博客&#xff08;阿里嘎多&#xff01;&#xff09; 代码 #!/usr/bin/env python # -*- coding: utf-8 -*- # author&#xff1a;Wangdali time:2021年1月20日16:08:44 #python实现&#xff1a;贪吃蛇游戏玩法&#xff1a;回车开始游戏&am…

k-means聚类算法及matlab实现(简单实现)

k-means简介 k-means算法也称k均值算法&#xff0c;是一种常用的聚类算法。聚类算法是研究最多、应用最广的一种无监督学习算法。   聚类试图将数据集中的样本划分为若干个通常是不相交的子集&#xff0c;每个子集称为一个“簇”。通过这样的划分&#xff0c;每个簇里的样本可…

matlab 层次聚类

MATLAB的统计工具箱中的多元统计分析中提供了聚类分析的两种方法&#xff1a; 1.层次聚类 hierarchical clustering 2.k-means聚类 这里用最简单的实例说明以下层次聚类原理和应用发法。 层次聚类是基于距离的聚类方法&#xff0c;MATLAB中通过pdist、linkage、dendrogram、…

K-means聚类算法及其MATLAB实现

参考&#xff1a; http://www.csdn.net/article/2012-07-03/2807073-k-means http://www.cnblogs.com/zhzhang/p/5437778.html http://blog.csdn.net/qll125596718/article/details/8243404/ K-means属于无监督学习方法 K表示类别数&#xff0c;Means表示均值&#xff0c;K…

基于MATLAB的K-means聚类算法

实验数据说明 Iris也称鸢尾花卉数据集&#xff0c;是一类多重变量分析的数据集。通过花萼长度&#xff0c;花萼宽度&#xff0c;花瓣长度&#xff0c;花瓣宽度4个属性预测鸢尾花卉属于&#xff08;Setosa(山鸢尾)&#xff0c;Versicolour(杂色鸢尾)&#xff0c;Virginica(维吉尼…