带你开发一个二维周视图日历

即之前实现了一个月视图日历,我们今天来实现一个二维周视图的日历。

以下进行分析其中的关键部分。

结构准备

不同之处在于其在日历的基础上还有一个分类轴,用于展示不同的类目,主要用于一周内的日程安排、会议安排等。

二维则和之前单独的有所不同,二维日历再切换日期时不用全部重新渲染,分类是不用变的,仅仅改变显示的日期即可。

而且由于是二维的,插入的内容必定是同时属于一个分类和一个时间段的,内容肯定是可以跨越时间(即日期轴)的,因此不能直接将插入的内容像开始的日历一样直接......

带你开发一个日历控件

日历控件多的不胜枚举,为什么我们还要再造一个轮子呢?

因为大多数日历控件都是用于选择日期的,有种需求是要在日历上展示各种各样的内容,这样的日历控件较少,而且试用下来并不满意。

因此就再造一个轮子,现在带你一起基于使用之前完成的组件机制来开发一个日历控件。

需求

简单把需求整理如下:

月视图

支持在日历中每一天中插入任意的内容

相关点击事件

获取日历当前视图的开始和结束日期

获取设置选中的日期

实现分析

首先我们拿系统中自带的日历观察一下,......

网页中文本朗读功能开发实现分享

前几天完成了一个需求,在网页中完成鼠标指向哪里,就用语音读出所指的文本。如果是按钮、链接、文本输入框,则还还要给出是什么的提醒。同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。

重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。

标签朗读

这个很简单了,只用根据当前是什么标签,给出提示即可。

// 标签朗读文本

var tagTextConfig = {

'a': '链接',

'input[text]......

window.onload 触发时机问题

本文关键点: window.onload 和 页面上 ajax 的成功回调到底哪个先触发。

答案是不确定。

问题详情

之前遇到一个现象,在父页面弹出一个Dialog加载一个子页面,在onload回调中传递一个参数给子页面,子页面异步ajax成功回调中要使用这个变量。

然而出现的情况是在ajax的成功回调中大多数情况下是取不到这个在onload传来的值,但是偶尔又是可以的。

查阅此Dialog源码,以上逻辑可以进行如下简化。

父页面:

<ifra......

实现一套自定义事件机制

事件机制为我们的web开发提供了极大的方便,使得我们能在任意时候指定在什么操作时做什么操作、执行什么样的代码。

如点击事件,用户点击时触发;keydown、keyup事件,键盘按下、键盘弹起时触发;还有上传控件中,文件加入前事件,上传完成后事件。

由于在恰当的时机会有相应的事件触发,我们能为这些事件指定相应的处理函数,就能在原本的流程中插入各种各样的个性化操作和处理,使得整个流程变得更加丰富。

诸如click、blur、focus等事件是原本的dom就直接提供的原生事件,......

带你了解css计数器——counters

第一次了解到这个css是因为代码高亮-prismj中行号显示的实现。

当时很好奇前面的行号是如何实现的,一探究竟原来非常简单。

话不多说,先看代码。

一段css代码经过替换后的HTML:

<pre class="line-numbe......

你所不知道的表格

table {table-layout:auto;}

表格 table 出现的很久了,曾经作为风靡一时的布局神器,但随着css层叠样式的各种优势,表格布局基本都已经淡出人们的视线。目前表格基本上的作用就只有用作表格了。但是由于我们对表格了解甚少,在表格上其实是有不少坑的,下面就让我们一起来填填坑。

填坑进行时

单元格宽度无效

这个是非常常见的问题了,简单重现如下:

代码:

<style>

#test1 td {

border:1px solid #333......

《悟空传》

这几天《悟空传》这部电影传火,我忙里偷闲,将《悟空传》的原书读了一遍。

如果失去是苦,你还怕不怕付出?

如果坠落是苦,你还要不要幸福?

如果迷乱是苦,该开始还是结束?

如果追求是苦,这是坚强还是执迷不悟?

之前就有看到说《西游记》其实不......