JS之简易日历的制作

最新推荐文章于 2020-03-14 15:45:14 发布
最新推荐文章于 2020-03-14 15:45:14 发布
阅读量592 收藏 1
点赞数 2
分类专栏： 学习总结 文章标签： 简易日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44586361/article/details/87285439
版权

下面我为大家分享一个我制作的简易日历，话不多说，直接上代码
body部分

    <body>
        <div id='tab'>
        <ul>
         <li class="active"><h2>JAN</h2></li>
                    <li><h2>FEB</h2></li>
                    <li><h2>MAR</h2></li>
                    <li><h2>APR</h2></li>
                    <li><h2>MAY</h2></li>
                    <li><h2>JUN</h2></li>
                    <li><h2>JUL</h2></li>
                    <li><h2>AUG</h2></li>
                    <li><h2>SEP</h2></li>
                    <li><h2>OCT</h2></li>
                    <li><h2>NOV</h2></li>
                    <li><h2>DEC</h2></li>
        </ul>
        </div>
        <div id='div1'>
            <h2>一月</h2>
            <p>爆竹声中一岁除，春风送暖入屠苏</p>
        </div>
    </body>

css部分

<style>
        #tab ul{width: 200px;height:230px ;text-align:center;}
        #tab ul li{float: left;width:50px;height:50px ;margin:5px;background:orange;border: 1px solid green;list-style-type: none;text-align: center;}
        #tab .active{background-color: #ccc;}
        #div1{width: 230px;height:150px;border:1px solid green ;text-align: center;margin-left: 20px;background:beige;}
    </style>

script部分
在这里插入图片描述

云之前端
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端---JS简易日历
05-22
非常好看的js简易日历
JavaScript制作简单的日历效果
10-22
在这个示例中，我们展示了如何利用JavaScript来创建一个简单的日历效果。这个日历是静态的，主要用于展示基本的HTML、CSS和JavaScript的结合使用。 首先，从HTML结构开始，可以看到一个`<table>`元素被用来构建日历...
js制作简易日历
乃乃天外仙
03-14 382
innerHTML的使用： <div id="test"> <span style="color:red">index</span> saxibuli </div> 在上面代码中使用test.innerHTML,test.innerText,test.outerHTML： 语句 解释 举例 innerHTML 从对象的起始位置...
js制作日历
张兴锐的博客
12-30 2052
最近在开发过程中，用到了js制作日历。最终效果插件RendezVous.js代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的微店</title> <meta name="viewport" content="width=device-width, initial-sca
用JS制作简易的日历
weixin_30338497的博客
08-29 446
实现效果： HTML部分： <table> <p>请选择月份：</p><input type="month" name="" id="xmonth"> <tr> <td>日</td...
JS简易日历
CHC
05-24 474
JS简易日历实现思路：——类似选项卡，只是只有一个div负责显示内容 ——使用到innerHTML数组的使用——定义：arr=【1,2,3】 ——使用：arr【0】效果预览html页面布局<body> <div id="main" class="calender"> <ul> <li class="active"><h2>1</h2> <p>Jan</p></li> <li>
JavaScript实现简单日历效果
10-14
综上所述，通过JavaScript来实现一个简单日历效果，涉及到HTML结构的构建、JavaScript逻辑的编写以及CSS样式的设置。需要掌握的知识点包括HTML的select和table标签的使用，JavaScript的基本语法，DOM操作，事件监听...
js+html制作简单日历的方法
10-19
标题和描述中提到的知识点是关于使用JavaScript和HTML制作一个简单日历的教程。这个过程涉及前端开发的基本技能，包括HTML结构设计、CSS样式设置和JavaScript脚本编程。下面将详细展开这些知识点： HTML结构设计： ...
JavaScript实现简单的日历效果
10-21
JavaScript实现简单的日历效果的知识点包括： 1. HTML结构布局：该日历模板使用了标准的HTML结构，包括<!DOCTYPEhtml>声明、、和元素。在部分包含了页面的字符集、页面标题以及内嵌的CSS样式。页面的主要内容区域被...
基于javascript编写简单日历
10-22
基于JavaScript编写简单日历的过程中，涉及到了多个知识点，包括JavaScript基础语法的应用，日期对象的创建和操作，以及基于特定需求实现逻辑的编程技巧。下面将详细说明这些知识点： 一、表格行数的确定 在创建...
js简易日历
女神修炼日记
11-23 620
JavaScript实现简易日历效果
js 简易日历的制作（innerHTML）
liuzong_dage的博客
11-05 607
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #tab{text-ali
JS实现-简易日历
My_CODEart的博客
12-24 734
1.选项卡的实现 2.匿名函数 无名字的函数 属性id.function(){} 3.html文件加载问题 在写js的代码,如果js代码中需要先加载html文件之后才能获取到值得话,必须把js代码写在指定标签获取值得后面.否则报错或无法运行.由于js代码嵌入在HTML标签中,导致阅读性差,以及一些其他问题,因此可以使用window.onload来优先加载HTML文件. 4.样式优先级 标签<...
纯手工js+Jquery打造的日历（根据一个网友自编的简单的js日历改造的）
u011681370的专栏
11-13 4234
调用：new Calendar("calTable","date","selectYear","selectMonth",2000,2020); 前四个参数都是一些ID，最后两个，前一个是日历的起始年份，后一个是日历的结束年份，若不写，默认当年为结束年份 首先看一下效果： 单击选中的效果是天蓝色：代码中设置了可以选中的时间范围，白色的为可以操作选中的范围：，灰色为不可以操作的范围：
学习js简易年历的制作
满城风絮的专栏
01-27 726
复习了一下选项卡的制作，在简易年历的制作中，又新用到了innerHTML、循环、数组的使用。坚持下去！希望技术大牛多多指点！
JS实现简单日历
莫问前程F1的博客
01-03 673
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--CSS样式--> <style type="text/css"> ...
js简易日历innerHtml
Alex十年的博客
03-11 356
注意事项： 思路同选项卡差不多， 1、对于最下面文字的更改，可以使用数组，把他们的内容都放到一个数组中，然后使用字符串的拼接来实现 2、innerHtml是用来设置标签内的文字，而value是用来设置input中的文字值 3、对于字符串连接，为了不使数字和字母连在一起，可以使用括号括起来。即同数学中的加法的优先级一样 &lt;!DOCTYPE html&gt; &lt;html&gt; ...
JS制作日历
yangyalun的博客
04-08 545
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" type="text
利用html,css和js制作简单日历
最新发布
06-10
好的，以下是一个简单的日历制作过程： 1. HTML 结构 首先，我们需要定义一个 HTML 结构来构建日历。可以使用 `<table>` 标签来实现。代码如下： ```html <table> <thead> <tr> <th colspan="7" class="month"></th> </tr> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead> <tbody class="days"></tbody> </table> ``` 2. CSS 样式 接着，我们需要添加一些 CSS 样式来美化日历。可以使用 CSS3 的 flexbox 布局，让日历表格更加美观。代码如下： ```css table { border-collapse: collapse; width: 100%; } th { padding: 10px; text-align: center; } td { padding: 10px; text-align: center; border: 1px solid #ccc; } .month { font-size: 20px; font-weight: bold; } .days { display: flex; flex-wrap: wrap; justify-content: space-between; } ``` 3. JavaScript 逻辑 最后，我们需要使用 JavaScript 来动态生成日历内容。可以使用 Date() 对象来获取当前日期和月份，然后根据当前月份生成当月的日期。代码如下： ```javascript // 获取当前日期和月份 const date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; // 设置月份 const monthEl = document.querySelector('.month'); monthEl.innerText = `${year}年${month}月`; // 获取当月天数 const days = new Date(year, month, 0).getDate(); // 生成当月日期 const daysEl = document.querySelector('.days'); let html = ''; for (let i = 1; i <= days; i++) { html += `<td>${i}</td>`; } daysEl.innerHTML = html; ``` 以上就是制作简单日历的过程，你可以根据自己的需求进行样式和功能的更改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值