web实例之电子日历

获取本机时间

进行处理

对数据进行处理

页面格局可以使用列表也可以用表格

逻辑使用js实现

效果图如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>日历</title><style>table {height: 230px;width: 320px;margin:60px auto;text-align: center;border: 1px solid rgba(97,150,245,1.00);border-bottom: 3px double rgba(97,150,245,1.00);box-shadow: 0 1px 2px darkcyan;}th,td {  border: 1px solid rgba(97,150,245,1.00);}.today {color:#F00;}</style><script>function isLeap(year) {return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;}var i, k,today = new Date(), y = today.getFullYear(), m = today.getMonth(), d = today.getDate(), firstday = new Date(y, m, 1), dayOfWeek = firstday.getDay(), days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); document.write("<table cellspacing='0'><tr><td colspan ='7'>" + y + "年" + (m + 1) + "月" + "</td></tr>");document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); for(i = 0; i < str_nums; i += 1) { document.write('<tr>');for(k = 0; k < 7; k++) {var idx = 7 * i + k; var date = idx - dayOfWeek + 1; (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); }document.write('</tr>');}document.write('</table>');</script></head><body></body>
</html>

web实例之电子日历相关推荐

基于WEB的电子日历
经常在项目中有填写日期的工作,如果手动的输入当然可以,但是填写的日期往往和期望的不符.解决的方法有很多,这里主要阐述在Web项目中填写日历,自己动手开发一个电子日历,供用户选择合适的日期. 基于Web ...
简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
linux线程池实现多线程并发,基于Linux的多线程池并发Web服务器设计-电子设计工程.PDF...
基于Linux的多线程池并发Web服务器设计-电子设计工程.PDF 第卷第期电子设计工程年月基于的多线程池并发服务器设计陈涛任海兰武汉邮电科学研究院湖北武汉摘要时至今 ...
电子日历插件（阳历转阴历工具...）
现在网络上大部分农历算法的都很少,都是百年农历算法(截止到2020年).为此从某云上找到开源大佬[Jea杨(JJonline@JJonline.Cn)]的农历算法.实际上计算阳历转农历没有直接的转换算 ...
HTML简单电子日历的设计与实现
** 效果图: ** 源码: 文字版: 简单电子日历
c语言课程设计日历显示,c语言课程设计_电子日历.doc
c语言课程设计_电子日历第 PAGE \* Arabic \* MERGEFORMAT 14 页第 PAGE \* Arabic \* MERGEFORMAT 14 页课程设计( 论文 ) ...
2021-10-22 KiKi定义电子日历类
勇敢牛牛不怕困难牛客网编程初学者入门训练 BC139 题目:KiKi定义电子日历类附: 思路: 先定义3个整形变量按照题目要求的格式年.月.日输入进去,再按照题目要求的格式日\月\年输出出来即可 ...
时钟晶振在电子日历上的作用！
电子日历在生活中日益普遍,该设计主要利用时钟芯片.表晶32.768KHZ,石英晶体谐振器.温度传感器DS18B20 和液晶屏LCD1602 构建了一个可测温式万年历装置,电路结构简单,具有语音报时功能 ...
MSP430G2553 launchpad 口袋板口袋实验平台数字电子日历时钟设计秒表闹钟整点报时万年历电子时钟
题10 数字电子日历/时钟设计设计一个基于MSP430的电子日历和时钟. 基本要求 (1)可通过按键在日历和时间之间切换显示: (2)可由按键调整日期和时间 (3)可整点报时('铆.嘟"声 ...

web实例之电子日历

web实例之电子日历相关推荐

最新文章

热门文章