用JavaScript代码编写日历

分手后的思念是犯贱 2022-06-07 02:12 311阅读 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 条评论，311人围观）

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

相关阅读

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

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

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

相关 javascript简易日历

<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <title>Cale

谁借莪１个温暖的怀抱￠/ 2022年08月05日 19:30/ 0 赞/ 175 阅读

相关用JavaScript代码编写选项卡

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

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

相关用JavaScript代码编写日历

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

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

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

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

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

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

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

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

相关用JavaScript编写钟表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</

Love The Way You Lie/ 2022年05月20日 02:54/ 0 赞/ 206 阅读

相关 use java编写日历

学习java中的Calendar类发现编写日历真的很有意思，要是没事就可以编个程序随便查看xxx年xxx月xx日的日历 very nice! CalendarBean

ゞ浴缸里的玫瑰/ 2022年04月11日 13:26/ 0 赞/ 197 阅读

相关 java编写日历

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

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

相关 JavaScript 日历

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

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