js实现仿window系统日历效果-js教程-PHP中文网

首页

web前端

js教程

js实现仿window系统日历效果

php中世界最好的语言

Dec 30, 2017 pm 06:00 PM

javascript window 效果

这次给大家带来的是在js实现仿window系统日历效果，这是完全用原声的JS来写出来的代码，虽然不用插件，代码量多了一些，但是还是很有参考价值的，今天就给大家好好分析一下。

该日历主要实现了获取当前时间时分秒，年月日星期，动态生成选择年的select，月的select，然后根据你所选中的年月，显示该年月对应的这一个月的日期。

点击上一个月，下一个月按钮，在下拉列表中显示对应的年月。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #calendar {
   position: absolute;
   padding: 5px;
   border: 1px solid #000000;
   background: #8f3349;
   display: none;
  }
   
  #todayTime {
   padding: 5px 0;
   font-size: 40px;
   color: white;
  }
  #todayDate {
   padding: 5px 0;
   font-size: 24px;
   color: #ffcf88;
  }
  #tools {
   padding: 5px 0;
   height: 30px;
   color: white;
  }
  #tools .l {
   float: left;
  }
  #tools .r {
   float: right;
  }
  table {
   width: 100%;
   color: white;
  }
  table th {
   color: #a2cbf3;
  }
  table td {
   text-align: center;
   cursor: default;
  }
  table td.today {
   background: #cc2951;
   color: white;
  }
 </style>
 <script>
  window.onload = function() {
   
   var text1 = document.getElementById(&#39;text1&#39;);
   
   text1.onfocus = function() {
    calendar();
   }
   
//   calendar();
   
   function calendar() {
   
    var calendarElement = document.getElementById(&#39;calendar&#39;);
    var todayTimeElement = document.getElementById(&#39;todayTime&#39;);
    var todayDateElement = document.getElementById(&#39;todayDate&#39;);
    var selectYearElement = document.getElementById(&#39;selectYear&#39;);
    var selectMonthElement = document.getElementById(&#39;selectMonth&#39;);
    var showTableElement = document.getElementById(&#39;showTable&#39;);
    var prevMonthElement = document.getElementById(&#39;prevMonth&#39;);
    var nextMonthElement = document.getElementById(&#39;nextMonth&#39;);
   
    calendarElement.style.display = &#39;block&#39;;
   
    /*
     * 获取今天的时间
     * */
    var today = new Date();
   
    //设置日历显示的年月
    var showYear = today.getFullYear();
    var showMonth = today.getMonth();
   
     //持续更新当前时间
    updateTime();
   
    //显示当前的年月日星期
    todayDateElement.innerHTML = getDate(today);
   
    //动态生成选择年的select
    for (var i=1970; i<2020; i++) {
     var option = document.createElement(&#39;option&#39;);
     option.value = i;
     option.innerHTML = i;
     if ( i == showYear ) {
      option.selected = true;
     }
     selectYearElement.appendChild(option);
    }
    //动态生成选择月的select
    for (var i=1; i<13; i++) {
     var option = document.createElement(&#39;option&#39;);
     option.value = i - 1;
     option.innerHTML = i;
     if ( i == showMonth + 1 ) {
      option.selected = true;
     }
     selectMonthElement.appendChild(option);
    }
   
    //初始化显示table
    showTable();
   
    //选择年
    selectYearElement.onchange = function() {
     showYear = this.value;
     showTable();
     showOption();
    }
   
    //选择月
    selectMonthElement.onchange = function() {
     showMonth = Number(this.value);
     showTable();
     showOption();
    }
   
    //上一个月
    prevMonthElement.onclick = function() {
     showMonth--;
     showTable();
     showOption();
    }
   
    //下一个月
    nextMonthElement.onclick = function() {
     showMonth++;
     showTable();
     showOption();
    }
   
   
    /*
    * 实时更新当前时间
    * */
    function updateTime() {
     var timer = null;
     //每个500毫秒获取当前的时间，并把当前的时间格式化显示到指定位置
     var today = new Date();
     todayTimeElement.innerHTML = getTime(today);
     timer = setInterval(function() {
      var today = new Date();
      todayTimeElement.innerHTML = getTime(today);
     }, 500);
    }
   
    function showTable() {
     showTableElement.tBodies[0].innerHTML = &#39;&#39;;
     //根据当前需要显示的年和月来创建日历
     //创建一个要显示的年月的下一个的日期对象
     var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0);
     //对下一个月的1号0时0分0秒的时间 - 1得到要显示的年月的最后一天的时间
     var date2 = new Date(date1.getTime() - 1);
     //得到要显示的年月的总天数
     var showMonthDays = date2.getDate();
     //获取要显示的年月的1日的星期,从0开始的星期
     date2.setDate(1);
     //showMonthWeek表示这个月的1日的星期，也可以作为表格中前面空白的单元格的个数
     var showMonthWeek = date2.getDay();
   
     var cells = 7;
     var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells );
   
     //通过上面计算出来的行和列生成表格
     //没生成一行就生成7列
     //行的循环
     for ( var i=0; i<rows; i++ ) {
   
      var tr = document.createElement(&#39;tr&#39;);
   
      //列的循环
      for ( var j=0; j<cells; j++ ) {
   
       var td = document.createElement(&#39;td&#39;);
   
       var v = i*cells + j - ( showMonthWeek - 1 );
   
       //根据这个月的日期控制显示的数字
       //td.innerHTML = v;
       if ( v > 0 && v <= showMonthDays ) {
   
        //高亮显示今天的日期
        if ( today.getFullYear() == showYear && today.getMonth() == showMonth && today.getDate() == v ) {
         td.className = &#39;today&#39;;
        }
   
        td.innerHTML = v;
       } else {
        td.innerHTML = &#39;&#39;;
       }
   
       td.ondblclick = function() {
        calendarElement.style.display = &#39;none&#39;;
   
        text1.value = showYear + &#39;年&#39; + (showMonth+1) + &#39;月&#39; + this.innerHTML + &#39;日&#39;;
       }
   
       tr.appendChild(td);
   
      }
   
      showTableElement.tBodies[0].appendChild(tr);
   
     }
    }
   
    function showOption() {
   
     var date = new Date(showYear, showMonth);
     var sy = date.getFullYear();
     var sm = date.getMonth();
     console.log(showYear, showMonth)
   
     var options = selectYearElement.getElementsByTagName(&#39;option&#39;);
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sy ) {
       options[i].selected = true;
      }
     }
   
     var options = selectMonthElement.getElementsByTagName(&#39;option&#39;);
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sm ) {
       options[i].selected = true;
      }
     }
    }
   }
   
   /*
    * 获取指定时间的时分秒
    * */
   function getTime(d) {
    return [
     addZero(d.getHours()),
     addZero(d.getMinutes()),
     addZero(d.getSeconds())
    ].join(&#39;:&#39;);
   }
   
   /*
   * 获取指定时间的年月日和星期
   * */
   function getDate(d) {
    return d.getFullYear() + &#39;年&#39;+ addZero(d.getMonth() + 1) +&#39;月&#39;+ addZero(d.getDate()) +&#39;日 星期&#39; + getWeek(d.getDay());
   }
   
   /*
   * 给数字加前导0
   * */
   function addZero(v) {
    if ( v < 10 ) {
     return &#39;0&#39; + v;
    } else {
     return &#39;&#39; + v;
    }
   }
   
   /*
   * 把数字星期转换成汉字星期
   * */
   function getWeek(n) {
    return &#39;日一二三四五六&#39;.split(&#39;&#39;)[n];
   }
   
  }
 </script>
</head>
<body>
   
<input type="text" id="text1">
   
 <p id="calendar">
   
  <p id="todayTime"></p>
  <p id="todayDate"></p>
   
  <p id="tools">
   <p class="l">
    <select id="selectYear"></select> 年
    <select id="selectMonth"></select> 月
   </p>
   <p class="r">
    <span id="prevMonth">∧</span>
    <span id="nextMonth">∨</span>
   </p>
  </p>
   
  <table id="showTable">
   <thead>
    <tr>
     <th>日</th>
     <th>一</th>
     <th>二</th>
     <th>三</th>
     <th>四</th>
     <th>五</th>
     <th>六</th>
    </tr>
   </thead>
   <tbody></tbody>
  </table>
   
 </p>
   
</body>
</html>

登录后复制

相信看了以上介绍你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7347

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

用户遭遇罕见故障三星 Watch 智能手表突现白屏问题 Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告

九州风神阿萨辛 4S 散热器评测风冷'刺客大师”范儿 Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系

春日里的精致光影艺术，哈趣 H2 性价比之选 Apr 17, 2024 pm 05:07 PM

随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入

航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，

七彩虹隐星 P15 24 评测：颜值性能兼具的硬核全能游戏本 Mar 06, 2024 pm 04:40 PM

在当下科技飞速发展的时代，笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言，拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计，成为了未来的引领者，堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU，外观采用更时尚的宇宙飞船设计风格，同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便 Apr 23, 2024 am 08:04 AM

一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏

真正的一镜走天下尼克尔 Z 28-400mm f/4-8 VR 镜头上手体验 Mar 28, 2024 pm 02:54 PM

很多摄影爱好者喜欢使用镜头，他们的拍摄需求非常多变，因此在镜头的选择上更倾向于一支比较全能的产品，也就是我们俗称的"一镜走天下"镜头。刚好，现在尼康推出了一支新的产品，尼克尔Z28-400mmf/4-8VR镜头，一支真正的"一镜走天下"镜头。镜头从28mm广角端一直覆盖到400mm长焦端，配备其Z卡口相机，可以轻松拍摄十分丰富的摄影主题，并带来一场丰富的视角变化。今天，我们就通过近期的使用体验，跟大家一起聊聊这支尼克尔Z28-400mmf/4-8VR镜头。尼克尔Z28-400mmf/4-8VR是

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

See all articles

js实现仿window系统日历效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题