用JavaScript代码编写日历

分手后的思念是犯贱 2022-06-07 02:12 351阅读 0赞

![Center][]

**一个简单的日历如下：这里主要用到JavaScript中的**

new Date();

**属性。**

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	      * {margin: 0; padding: 0;}
    	     #cal {
    	     	 width: 200px;
    	     	 height: 220px;
    	     	 background-color: blue;
    	     	 margin: 80px auto;
    	     	 padding-top: 10px;
    	     }
    
    	     #cal > div {
    	     	  padding: 0 10px;
    	     	  color: #fff;
    	     }
    
    	     p {
    	     	width: 100px;
    	     	height: 100px;
    	     	line-height: 100px;
    	     	text-align: center;
    	     	font-size: 36px;
    	     	background-color: green;
    	     	margin: 40px auto
    	     }
    	</style>
    </head>
    <body>
    	 <div id="cal">
    	 	<div id="topDiv"></div>
    	 	<p id="day"></p>
    	 </div>
    	 <script type="text/javascript">
    	     //2017年10月6日 星期五
    	      var date = new Date(); 
    	      var year = date.getFullYear();
    	      var month = date.getMonth();
    	      var day = date.getDate();
    	       var weekday = date.getDay(); 
    	       var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    	       var str = year+"年"+(month+1)+"月"+day+"日 "+arr[weekday];
            
               var cal = document.getElementById("cal");
               // 给第一个孩子div设置内容
               cal.children[0].innerHTML = str;
               // 给第二个孩子p设置内容
               cal.children[1].innerHTML = day;
    	 </script>
    </body>
    </html>

[Center]: /images/20220607/57c866fdc6484bd588f4e1f2e9a4c991.png

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关编写现代 JavaScript 代码

还记得 JavaScript 是一种用于在光标悬停在页面上时使元素发生变化的语言吗？这些日子已经过去了，每种语言都会随着时间的推移而发展，我们使用它们的方式也是如此。看看你一两

刺骨的言语ヽ痛彻心扉/ 2023年10月12日 20:38/ 0 赞/ 78 阅读

相关用 JavaScript 编写日历：第 2 部分

以下是非常流行的用 JavaScript 编写日历的后续内容，其中我用 JavaScript 创建了一个日历小部件。 ![e3b38e46ac204cb3b5c30f0b87

末蓝、/ 2023年09月28日 08:17/ 0 赞/ 26 阅读

相关用 JavaScript 编写日历

概述在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。[日历将包括仅使用普通旧 JavaScript][JavaScript]的月份和年份的下拉列

怼烎@/ 2023年09月28日 08:17/ 0 赞/ 24 阅读

相关使用js编写的日历代码

[下载地址][Link 1]使用js编写的日历代码，非常简单的实现方式。 ![1631561124.png][] dd: [Link 1]: https://yy123

清疚/ 2022年09月12日 01:44/ 0 赞/ 240 阅读

相关用JavaScript代码编写选项卡

选项卡其实在很多网站站中可以看到。类似于切换导航。代码如下： <!DOCTYPE html> <html lang="en"> <head>

喜欢ヅ旅行/ 2022年06月07日 02:13/ 0 赞/ 234 阅读

相关用JavaScript代码编写日历

![Center][] 一个简单的日历如下：这里主要用到JavaScript中的 new Date(); 属性。代码如下： <!DOCTYPE h

分手后的思念是犯贱/ 2022年06月07日 02:12/ 0 赞/ 352 阅读

相关如何用JavaScript代码编写拖拽

拖拽，顾名思义拖着一块区域进行移动。比如拖着文件上传，拖动整个qq等。下面呢，小编编写两个极为简单的代码。首先呢写个简单易懂但有点复杂的，编写一个class.box，背

深碍√TFBOYSˉ_/ 2022年06月07日 01:38/ 0 赞/ 206 阅读

相关 JavaScript -- JavaScript 代码编写的位置

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" />

本是古典何须时尚/ 2022年06月02日 05:29/ 0 赞/ 238 阅读

相关 java编写日历

java编写日历代码 \`import java.util.Scanner; public class Calendar1\{ public static int

Myth丶恋晨/ 2022年04月01日 12:52/ 0 赞/ 293 阅读

相关 JavaScript 日历

![在这里插入图片描述][20190103184426899.gif] <!DOCTYPE html> <html> <head> <meta

一时失言乱红尘/ 2022年03月31日 15:28/ 0 赞/ 327 阅读