- 浏览: 2197964 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1240)
- mac/IOS (287)
- flutter (1)
- J2EE (115)
- android基础知识 (582)
- android中级知识 (55)
- android组件(Widget)开发 (18)
- android 错误 (21)
- javascript (18)
- linux (70)
- 树莓派 (18)
- gwt/gxt (1)
- 工具(IDE)/包(jar) (18)
- web前端 (17)
- java 算法 (8)
- 其它 (5)
- chrome (7)
- 数据库 (8)
- 经济/金融 (0)
- english (2)
- HTML5 (7)
- 网络安全 (14)
- 设计欣赏/设计窗 (8)
- 汇编/C (8)
- 工具类 (4)
- 游戏 (5)
- 开发频道 (5)
- Android OpenGL (1)
- 科学 (4)
- 运维 (0)
- 好东西 (6)
- 美食 (1)
最新评论
-
liangzai_cool:
请教一下,文中,shell、C、Python三种方式控制led ...
树莓派 - MAX7219 -
jiazimo:
...
Kafka源码分析-序列5 -Producer -RecordAccumulator队列分析 -
hp321:
Windows该命令是不是需要安装什么软件才可以?我试过不行( ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
hp321:
Chenzh_758 写道其实直接用一下代码就可以解决了:JP ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
huanghonhpeng:
大哥你真强什么都会,研究研究。。。。小弟在这里学到了很多知识。 ...
android 浏览器
转的.
<html> <head> <style> .body{ background-color:white; } .calendar table{ width:100%; height:100%; position:relative; border-collapse:collapse; } .calendar table th.first{ height:25px; background-color:maroon; font-family: arial, helvetica; font-size:15px; color:white; border-right:1px solid white; border-left:1px solid maroon; } .calendar table th.mid{ height:25px; background-color:maroon; font-family: arial, helvetica; font-size:15px; color:white; border-right:1px solid white;a } .calendar table th.last{ height:25px; background-color:maroon; font-family: arial, helvetica; font-size:15px; color:white; border-right:1px solid maroon; } .calendar table td { width:14%; border:1px solid maroon; padding:0px; } .calendar table.tdborder{ width:100%; height:100%; position:relative; } .calendar table td.tdborderNormal{ border:1px solid transparent; width:100%; height:100%; position:relative; padding:0px; } .calendar table td.tdborderOnfocus { border:1px solid red; width:100%; height:100%; position:relative; padding:0px; } .calendar table td.caltitle_p { height:25px; font-family: arial, helvetica; font-size:20px; color:maroon; border:0px; text-align:center; cursor:pointer; } .calendar table td.caltitle_m { height:25px; font-family: arial, helvetica; font-size:20px; color:maroon; border:0px; text-align:center; } .calendar table td.caltitle_m_lr { height:25px; font-family: arial, helvetica; font-size:11px; color:maroon; border:0px; text-align:left; cursor:pointer; } .calendar table td.caltitle_l { height:25px; font-family: arial, helvetica; font-size:20px; color:maroon; border:0px; text-align:center; cursor:pointer; } .calendar table td.quarter { height:25px; font-family: arial, helvetica; font-size:14px; color:maroon; border:0px; text-align:center; } .calendar table td.quartermonth { height:25px; font-family: arial, helvetica; font-size:12px; color:maroon; border:0px; text-align:center; cursor:pointer; } .calendar div.dateTitle{ width:98%; height:15px; position:relative; font-family: arial, helvetica; font-size:13px; text-align:right; } .calendar div.dateContext{ width:100%; height:90%; position:relative; font-family: arial, helvetica; font-size:12px; text-align:left; position:relative; border-top:1px dashed maroon; } .calendar tabel td.now{ font-family: arial, helvetica; font-size:11px; cursor:hand; position:relative; } </style> <script> var currentDate = new Date(); Date.prototype.getMonthDays = function(month,year){ var nextMonthFiristDay = new Date(); nextMonthFiristDay.setDate('1'); var nowMonthFiristDay = new Date(); nowMonthFiristDay.setDate('1'); if(year){ nowMonthFiristDay.setFullYear(year); nextMonthFiristDay.setFullYear(year); } if(month){ nextMonthFiristDay.setMonth(month); nowMonthFiristDay.setMonth(month-1); }else{ nextMonthFiristDay.setMonth(nextMonthFiristDay.getMonth()+1); } return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0); } Date.prototype.getFirstDayOfMonthInWeek = function(month,year){ var today = new Date(); today.setDate('1'); if(year){ today.setFullYear(year); } if(month){ today.setMonth(month-1); } return today.getDay(); } function addRow(tbody,strings,ishead){ var tds = new Array(); var texts = new Array(); var _tr = document.createElement("tr"); tbody.appendChild(_tr); for(var i=0;i<7;i++){ if(ishead){ tds[i] = document.createElement("th"); if(i==0){ tds[i].className = 'first'; }else if(i==6){ tds[i].className = 'last'; }else{ tds[i].className = 'mid'; } }else{ tds[i] = document.createElement("td"); } _tr.appendChild(tds[i]); if(strings){ texts[i] = document.createTextNode(strings[i]); tds[i].appendChild(texts[i]); } } } function mapMonthNum(month){ var monthStr = new Number(); switch (month) { case 'Jan': monthStr = 0 break case 'Feb': monthStr = 1 break case 'Mar': monthStr = 2 break case 'Apr': monthStr = 3 break case 'May': monthStr = 4 break case 'Jun': monthStr = 5 break case 'Jul': monthStr = 6 break case 'Aug': monthStr = 7 break case 'Sep': monthStr = 8 break case 'Oct': monthStr = 9 break case 'Nov': monthStr = 10 break case 'Dec': monthStr = 11 break } return monthStr; } function mapMonth(month){ var monthStr = new Object(); switch (month) { case 0: monthStr = 'Jan' break case 1: monthStr = 'Feb' break case 2: monthStr = 'Mar' break case 3: monthStr = 'Apr' break case 4: monthStr = 'May' break case 5: monthStr = 'Jun' break case 6: monthStr = 'Jul' break case 7: monthStr = 'Aug' break case 8: monthStr = 'Sep' break case 9: monthStr = 'Oct' break case 10: monthStr = 'Nov' break case 11: monthStr = 'Dec' break } return monthStr; } function addTitleMonth(td,strings,calendar,calendar_context){ var quarter1table = document.createElement("table"); var quarter1tbody = document.createElement("tbody"); var quarter1tr = document.createElement("tr"); td.appendChild(quarter1table); quarter1table.appendChild(quarter1tbody); quarter1tbody.appendChild(quarter1tr); var quarter1tds = new Array(); for(var i=0;i<strings.length;i++){ quarter1tds[i] = document.createElement("td"); quarter1tds[i].monthvalue = mapMonthNum(strings[i]); quarter1tds[i].appendChild(document.createTextNode(strings[i])); quarter1tr.appendChild(quarter1tds[i]); quarter1tds[i].className = 'quartermonth'; quarter1tds[i].onclick = function(){ currentDate.setMonth(this.monthvalue); calendar.removeChild(calendar_context); initCal(); } } } function initCal(){ var calendar = document.getElementById("calendar"); var calendar_context = document.createElement("table"); calendar.appendChild(calendar_context); var _tbody = document.createElement("tbody"); calendar_context.appendChild(_tbody); var days = currentDate.getMonthDays(currentDate.getMonth()+1,currentDate.getFullYear()); var cells = new Array(); var cellDivs = new Array(); var cellDivTbodys = new Array(); var cellDivTrs = new Array(); var cellDivTds = new Array(); var handleDates = new Array(); var txtNodes = new Array(); //create table; var calendar_title_tr = document.createElement("tr"); var calendar_title_td_p = document.createElement("td"); calendar_title_td_p.className = 'caltitle_p'; calendar_title_td_p.appendChild(document.createTextNode("<")); calendar_title_td_p.onclick=function(){ currentDate.setMonth(currentDate.getMonth()-1); calendar.removeChild(calendar_context); initCal(); } var calendar_title_td_m = document.createElement("td"); calendar_title_td_m.className = 'caltitle_m'; var calendar_title_td_m_table = document.createElement("table"); var calendar_title_td_m_tbody = document.createElement("tbody"); var calendar_title_td_m_tr = document.createElement("tr"); var calendar_title_td_m_tdl = document.createElement("td"); var calendar_title_td_m_tdm = document.createElement("td"); var calendar_title_td_m_tdr = document.createElement("td"); calendar_title_td_m.appendChild(calendar_title_td_m_table); calendar_title_td_m_table.appendChild(calendar_title_td_m_tbody); calendar_title_td_m_tbody.appendChild(calendar_title_td_m_tr); calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdl); calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdm); calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdr); calendar_title_td_m_tdm.className = 'caltitle_m'; calendar_title_td_m_tdl.className = 'caltitle_m'; calendar_title_td_m_tdr.className = 'caltitle_m_lr'; calendar_title_td_m_tdm.appendChild(document.createTextNode(mapMonth(currentDate.getMonth()) + ',' + currentDate.getFullYear())); var txtNow = document.createTextNode('[Now]'); calendar_title_td_m_tdr.appendChild(txtNow); calendar_title_td_m_tdr.onclick=function(){ currentDate = new Date(); calendar.removeChild(calendar_context); initCal(); } if(currentDate.getFullYear() == new Date().getFullYear() && currentDate.getMonth() == new Date().getMonth()){ if(txtNow){ calendar_title_td_m_tdr.removeChild(txtNow); } } var calendar_title_td_l = document.createElement("td"); calendar_title_td_l.className = 'caltitle_l'; calendar_title_td_l.appendChild(document.createTextNode(">")); calendar_title_td_l.onclick=function(){ currentDate.setMonth(currentDate.getMonth()+1); calendar.removeChild(calendar_context); initCal(); } calendar_title_tr.appendChild(calendar_title_td_p); var quarter1 = document.createElement("td"); quarter1.className = 'quarter'; var quarter2 = document.createElement("td"); quarter2.className = 'quarter'; calendar_title_tr.appendChild(quarter1); var monthTitles1 = ['Jan','Feb','Mar']; addTitleMonth(quarter1,monthTitles1,calendar,calendar_context); calendar_title_tr.appendChild(quarter2); var monthTitles2 = ['Apr','May','Jun']; addTitleMonth(quarter2,monthTitles2,calendar,calendar_context); calendar_title_tr.appendChild(calendar_title_td_m); var quarter3 = document.createElement("td"); quarter3.className = 'quarter'; var quarter4 = document.createElement("td"); quarter4.className = 'quarter'; calendar_title_tr.appendChild(quarter3); var monthTitles3 = ['Jul','Aug','Sep']; addTitleMonth(quarter3,monthTitles3,calendar,calendar_context); calendar_title_tr.appendChild(quarter4); var monthTitles4 = ['Oct','Nov','Dec']; addTitleMonth(quarter4,monthTitles4,calendar,calendar_context); calendar_title_tr.appendChild(calendar_title_td_l); _tbody.appendChild(calendar_title_tr); //create title; var calTitles = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; addRow(_tbody,calTitles,true); //create first row; addRow(_tbody); var startPoint = [2,currentDate.getFirstDayOfMonthInWeek(currentDate.getMonth()+1,currentDate.getFullYear())]; var contextDates = new Array(); for(var i=0;i<days;i++){ //alert("rows:" + startPoint[0] + ", cells:" + startPoint[1]); cells[i] = calendar_context.rows[startPoint[0]].cells[startPoint[1]]; cellDivs[i] = document.createElement("table"); cellDivs[i].className='tdborder'; cellDivTbodys[i] = document.createElement("tbody"); cellDivs[i].appendChild(cellDivTbodys[i]); cellDivTrs[i] = document.createElement("tr"); cellDivTbodys[i].appendChild(cellDivTrs[i]); cellDivTds[i] = document.createElement("td"); cellDivTds[i].className='tdborderNormal'; cellDivTrs[i].appendChild(cellDivTds[i]); cellDivTds[i].onmouseover = function(){ this.className = 'tdborderOnfocus'; } cellDivTds[i].onmouseout = function(){ this.className = 'tdborderNormal'; } cells[i].appendChild(cellDivs[i]); handleDates[i] = document.createElement("div"); handleDates[i].className='dateTitle'; contextDates[i] = document.createElement("div"); contextDates[i].className='dateContext'; cellDivTds[i].appendChild(handleDates[i]); cellDivTds[i].appendChild(contextDates[i]); txtNodes[i] = document.createTextNode(i+1); handleDates[i].appendChild(txtNodes[i]); var cellsPoint = startPoint[1]++; if(cellsPoint == 6){ startPoint[0]++; startPoint[1]=0; if(i != days-1){ addRow(_tbody); } } } } window.onload = function(){ initCal(); } </script> </head> <body> <div id='calendar' class='calendar'/> </body> </html>
发表评论
-
vue import 传入变量
2019-08-01 13:59 987在做动态添加component的时候,传入变量就会报错,出现以 ... -
vue配置font-awesome5的方法步骤
2019-07-25 18:10 487用yarn更新 yarn add @fortawesome ... -
为什么要使用computed而不是data获取vuex中的state
2018-09-27 19:05 1597最近在学习vuex时,照着官网最基本的 Vuex 记数应用示例 ... -
理解vuex -- vue的状态管理模式
2018-08-11 16:46 891vuex是什么? 先引用vuex ... -
Javascript(es2016) import和require用法和区别
2018-08-10 16:19 543写个简单js文件,假设名字为:lib.js 。 假设内容如下: ... -
vue中修改了数据但视图无法更新的情况
2018-07-02 18:31 2150我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此 ... -
Electron安装 for mac
2018-03-08 09:29 1323第一次用Electron这个安 ... -
vue组件大集合 component
2017-09-07 10:00 576vue组件分为全局组件、局部组件和父子组件,其中局部组件只 ... -
「Javascript」搞定JS面试——跨域问题
2017-03-15 13:50 606一、什么是跨域? 只要 ... -
node js搭建和实例
2016-06-30 20:13 953我的电脑是mac电脑,所 ... -
jquery 中的一个函数one讲解
2012-07-25 23:11 1286发现了一个特殊的函数one,其含义是能让其绑定的事件只执行一次 ... -
关于跨平台browser窗口大小的问题
2012-05-28 10:26 1232最近看到一篇文章,是讲浏览器的。其中有一点是讲窗口大小的,我感 ... -
按键测试,支持像 Ctrl+Alt+Shift+T 的组合键(注:非浏览器热键)
2011-08-04 15:41 1456<html> <head> & ... -
固定宽度的select下拉列表option选项显示不全的解决办法
2011-08-04 15:38 3362昨天因为工作需要,研 ... -
Js实现Map对象的代码
2011-08-04 15:15 1961<script type="text/ja ... -
Javascript框架
2011-07-27 08:47 1098jQuery - http://jquery.com jQue ... -
仅1K大小的javascript/jquery页码显示,完美实现腾迅微博分页效果
2011-07-19 08:42 1922仅1K大小的javascript/jquery页码显示,完美实 ...
相关推荐
- **综合应用**:利用JavaScript制作一个功能完善的日历控件。 #### 第四部分:综合应用——建立你自己的网站 **第二十三章:建立你自己的网站** - **项目规划**:确定网站的目标和内容。 - **设计布局**:使用...
接着是`DatePicker`,这同样是一个常见的日历控件名称,尤其在JSP和Java Web开发中广泛使用。DatePicker通常是与输入框关联,当用户点击输入框时会弹出一个日历视图供用户选择日期。它可能基于Bootstrap、jQuery UI...
本资源提供了八款不同风格的JavaScript(JS)加CSS实现的日历控件,每一种都有其独特的设计和功能特点。下面我们将详细探讨JS和CSS在构建这些日历控件中的应用,以及如何将它们整合到网页中。 1. **JS与CSS的作用**...
本项目是基于JSP(JavaServer Pages)和JavaScript技术实现的一个日历控件。下面我们将深入探讨这两个技术以及它们如何结合创建这样的功能。 **JSP(JavaServer Pages)**: JSP是Java平台上的动态网页技术,它将...
本资源提供了八款不同风格的日历控件,结合了JS(JavaScript)和CSS(Cascading Style Sheets)技术,旨在提升网页的用户体验和视觉效果。以下是对这些日历控件的详细解释: 1. **JS与CSS的结合**: JS...
【描述】:“通过css、javascript实现一个日期选择器的源代码,实用方便”说明了这个代码实现的日期选择器具有实际应用价值,易于使用,并且结合了CSS和JavaScript的优势,为用户提供良好的交互体验。CSS负责视觉...
本文将深入探讨“八款不同风格的日历控件(JS+CSS)2”这一主题,主要关注JavaScript(JS)和CSS(层叠样式表)在创建这些控件中的应用。 首先,JavaScript是一种强大的客户端脚本语言,常用于实现网页的动态效果和...
总的来说,JS+CSS日历控件是Web开发中的一个重要组成部分,通过JavaScript和CSS的结合,实现了既实用又美观的日期选择功能。LHG Calendar作为一个成熟的日历插件,为开发者提供了便利,使得在项目中集成日历功能变得...
【标题】"埃拉伯语言日历控件(包含css和js)" 描述了一款专为阿拉伯语言设计的日历组件,这款控件的核心是通过CSS(层叠样式表)和JS(JavaScript)来实现的。在网页开发中,日历控件是一个常见的交互元素,用于用户...
下面将详细介绍如何使用CSS和JavaScript来实现一个日期控件,以及涉及的关键知识点。 首先,创建日期控件的基础结构通常是一个HTML元素,如`<input>`或自定义的`<date-picker>`元素。`<input type="date">`是HTML5...
### 使用CSS和JavaScript创建日历控件的知识点详解 #### 一、项目概述 本项目旨在通过CSS和JavaScript实现一个可交互的日历控件。该控件不仅具有良好的视觉效果,还能让用户方便地选择日期,并在选中日期时提供反馈...
在这个“八款不同风格的日历控件(JS+CSS)4”的压缩包中,我们可以看到一个名为“Calendar4.js”的文件,这很可能是一个JavaScript实现的日历控件的核心代码库。下面我们将详细探讨与日历控件相关的知识点,以及JS和...
标题中的“八款不同风格的日历控件(JS+CSS)3”指的是一个包含多个样式各异的日历组件的集合,这些组件主要使用JavaScript(JS)和层叠样式表(CSS)来实现。在网页开发中,日历控件是常用的一种交互元素,允许用户...
在标签中提到了"javascript",这意味着实现这个日历控件的核心部分可能包含JavaScript代码。JavaScript是Web开发中的脚本语言,常用于实现网页的动态效果和交互。在这个日历控件中,JavaScript可能会用于生成日历的...
1. **调试**:使用开发者工具检查CSS样式应用情况,排查JavaScript错误,确保日历控件正常工作。 2. **性能优化**:减少不必要的DOM操作,使用事件委托提高性能,对CSS进行最小化压缩等。 综上,"html+js+css带阴历...
在这个案例中,我们关注的是一个名为"八款不同风格的日历控件(JS+CSS)5"的资源,它提供了多种设计风格的日历组件,适用于JavaScript和CSS技术栈。下面将详细介绍这些知识点。 首先,日历控件的实现离不开JavaScript...
在提供的文件名中,"calendar.html"可能是包含日历控件的HTML页面,而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件,我们可以深入了解这个日历控件的具体实现细节,包括具体的DOM操作...
JavaScript(JS)日历控件是网页开发中常用的一种组件,用于展示日期选择功能,通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面,方便用户选择日期,而无需手动输入。以下是对JS日历控件的一些详细...