如何用jQuery和CSS3制作数字时钟

html-css025

如何用jQuery和CSS3制作数字时钟,第1张

这个时钟不需要很多HTML,这是因为它很大的一部分,像工作日的名称和数字都是动态生成的。 下面是你需要在你页面上使用时钟时要有的标签:

index.html

<div id="clock" class="light">

<div class="display">

<div class="weekdays"></div>

<div class="ampm"></div>

<div class="alarm"></div>

<div class="digits"></div>

</div>

</div>

主元素为#clock的div,包含.display的div,用于容纳平日列表、AM/PM标记、闹铃和时间。 下面代码为每个数字生成一个标签:

<div class="zero">

<span class="d1"></span>

<span class="d2"></span>

<span class="d3"></span>

<span class="d4"></span>

<span class="d5"></span>

<span class="d6"></span>

<span class="d7"></span>

</div>

.digits元素包含6个像这样带span的div,每个div为时钟的一个数字。就像你在上面片段中所见到的一样,这些div拥有一个从0到9的样式名称,并且包含7个带独立样式的span元素,这些span是数字的一部分,像老的数字时钟一样:

数字说明

它们完全用CSS样式渲染且默认设置为 opacity:0 。定义在它们父div上的样式将决定它们的可见性。下面是数字“0”的CSS:

assets/css/styles.css

/* 0 */

#clock .digits div.zero .d1,

#clock .digits div.zero .d3,

#clock .digits div.zero .d4,

#clock .digits div.zero .d5,

#clock .digits div.zero .d6,

#clock .digits div.zero .d7{

opacity:1

}

除了中间一个,所有的片断都是可见的,我已经向所有的这些span添加了CSS3转换属性,当在数字之间切换时出现渐变效果。

样式表里有很多其他CSS,我不再这列举。我相信最好的方式去学习CSS如何工作就是在Firebug、Chrome的审查器或你浏览器里的开发者工具里即时审查demo的代码。

黑色主题

jQuery 代码

要想要时钟工作,我们将使用jQuery生成每个数字的标签,并且设置一个定时器每秒钟更新一次样式,为了更简单,我们使用moment.js 库(快速开始) 来补偿JavaScript原生日期和时间方法的缺陷。

assets/js/script.js

$(function(){

// Cache some selectors

var clock = $('#clock'),

alarm = clock.find('.alarm'),

ampm = clock.find('.ampm')

// Map digits to their names (this will be an array)

var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ')

// This object will hold the digit elements

var digits = {}

// Positions for the hours, minutes, and seconds

var positions = [

'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'

]

// Generate the digits with the needed markup,

// and add them to the clock

var digit_holder = clock.find('.digits')

$.each(positions, function(){

if(this == ':'){

digit_holder.append('<div class="dots">')

}

else{

var pos = $('<div>')

for(var i=1i<8i++){

pos.append('<span class="d' + i + '">')

}

// Set the digits as key:value pairs in the digits object

digits[this] = pos

// Add the digit elements to the page

digit_holder.append(pos)

}

})

// Add the weekday names

var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),

weekday_holder = clock.find('.weekdays')

$.each(weekday_names, function(){

weekday_holder.append('<span>' + this + '</span>')

})

var weekdays = clock.find('.weekdays span')

// Run a timer every second and update the clock

(function update_time(){

// Use moment.js to output the current time as a string

// hh is for the hours in 12-hour format,

// mm - minutes, ss-seconds (all with leading zeroes),

// d is for day of week and A is for AM/PM

var now = moment().format("hhmmssdA")

digits.h1.attr('class', digit_to_name[now[0]])

digits.h2.attr('class', digit_to_name[now[1]])

digits.m1.attr('class', digit_to_name[now[2]])

digits.m2.attr('class', digit_to_name[now[3]])

digits.s1.attr('class', digit_to_name[now[4]])

digits.s2.attr('class', digit_to_name[now[5]])

// The library returns Sunday as the first day of the week.

// Stupid, I know. Lets shift all the days one position down,

// and make Sunday last

var dow = now[6]

dow--

// Sunday!

if(dow <0){

// Make it last

dow = 6

}

// Mark the active day of the week

weekdays.removeClass('active').eq(dow).addClass('active')

// Set the am/pm text:

ampm.text(now[7]+now[8])

// Schedule this function to be run again in 1 sec

setTimeout(update_time, 1000)

})()

// Switch the theme

$('a.button').click(function(){

clock.toggleClass('light dark')

})

})

input {display:blockfloat:left} ul {margin:0pxpadding:0pxfloat:left} 这样就可以让input和ul显示在一行了。 但这样出现的问题是,紧跟着的内容也会跑到一行去,所以这里的ul后面再加一个div用来清除浮动。 input {display:blockfloat:left} ul {margin:0pxpadding:0pxfloat:left} div {clear:both} 当然,你也可以用两个td来并列实现,如: <table><tr><td><input type="text" size="30" maxlength="100" value=""> </td><td><ul class="errorMessage" style="color: red"><li><span>2134</span></li></ul></td></tr></table>

这个我是复制的 你试试可以不

出现这个现象有方面的,一是硬件,即内存方面有问题,二是软件,这就有多方面的问题了。

一:先说说硬件:

一般来说,电脑硬件是很不容易坏的。内存出现问题的可能性并不大(除非你的内存真的是杂牌的一塌徒地),主要方面是:

1。内存条坏了(二手内存情况居多)、2。使用了有质量问题的内存,3。内存插在主板上的金手指部分灰尘太多。

4。使用不同品牌不同容量的内存,从而出现不兼容的情况。5。超频带来的散热问题。你可以使用MemTest 这个软件来检测一下内存,

它可以彻底的检测出内存的稳定度。

二、如果都没有,那就从软件方面排除故障了。

先说原理:内存有个存放数据的地方叫缓冲区,当程序把数据放在缓冲区,需要操作系统提供的“功能函数”来申请,如果内存分配成功,

函数就会将所新开辟的内存区地址返回给应用程序,应用程序就可以通过这个地址使用这块内存。这就是“动态内存分配”,

内存地址也就是编程中的“光标”。内存不是永远都招之即来、用之不尽的,有时候内存分配也会失败。当分配失败时系统函数会返回

一个0值,这时返回值“0”已不表示新启用的光标,而是系统向应用程序发出的一个通知,告知出现了错误。作为应用程序,

在每一次申请内存后都应该检查返回值是否为0,如果是,则意味着出现了故障,应该采取一些措施挽救,这就增强了程序的“健壮性”。

若应用程序没有检查这个错误,它就会按照“思维惯性”认为这个值是给它分配的可用光标,继续在之后的执行中使用这块内存。

真正的0地址内存区储存的是计算机系统中最重要的“中断描述符表”,绝对不允许应用程序使用。在没有保护机制的操作系统下(如DOS),

写数据到这个地址会导致立即当机,而在健壮的操作系统中,如Windows等,这个操作会马上被系统的保护机制捕获,

其结果就是由操作系统强行关闭出错的应用程序,以防止其错误扩大。这时候,就会出现上述的内存不能为“read”错误,

并指出被引用的内存地址为“0x00000000“。内存分配失败故障的原因很多,内存不够、系统函数的版本不匹配等都可能有影响。

因此,这种分配失败多见于操作系统使用很长时间后,安装了多种应用程序(包括无意中“安装”的病毒程序),更改了大量的系统参数和

系统档案之后。在使用动态分配的应用程序中,有时会有这样的情况出现:程序试图读写一块“应该可用”的内存,但不知为什么,

这个预料中可用的光标已经失效了。有可能是“忘记了”向操作系统要求分配,也可能是程序自己在某个时候已经注销了这块内存而

“没有留意”等等。注销了的内存被系统回收,其访问权已经不属于该应用程序,因此读写操作也同样会触发系统的保护机制,企图

“违法”的程序唯一的下场就是被操作终止执行,回收全部资源。计算机世界的法律还是要比人类有效和严厉得多啊!像这样的情况都属

于程序自身的BUG,你往往可在特定的操作顺序下重现错误。无效光标不一定总是0,因此错误提示中的内存地址也不一定为“0x00000000”,

而是其它随机数字。

首先建议:

1、 检查系统中是否有木马或病毒。这类程序为了控制系统往往不负责任地修改系统,从而导致操作系统异常。平常应加强信息安全意识,

对来源不明的可执行程序绝不好奇。

2、 更新操作系统,让操作系统的安装程序重新拷贝正确版本的系统档案、修正系统参数。有时候操作系统本身也会有BUG,要注意安装官

方发行的升级程序。

3、 尽量使用最新正式版本的应用程序、Beta版、试用版都会有BUG。

4、 删除然后重新创建 Winnt\System32\Wbem\Repository 文件夹中的文件:在桌面上右击我的电脑,然后单击管理。在"服务和应用程序

"下,单击服务,然后关闭并停止 Windows Management Instrumentation 服务。 删除 Winnt\System32\Wbem\Repository 文件夹中的所有

文件。(在删除前请创建这些文件的备份副本。) 打开"服务和应用程序",单击服务,然后打开并启动

Windows Management Instrumentation 服务。当服务重新启动时,将基于以下注册表项中所提供的信息重新创建这些文件:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WBEM\CIMOM\Autorecover MOFs

下面搜集几个例子给大家分析:

例一:IE浏览器出现“0x0a8ba9ef”指令引用的“0x03713644” 内存,或者“0x70dcf39f”指令引用的“0x00000000”内存。

该内存不能为“read”。要终止程序,请单击“确定”的信息框,单击“确定”后,又出现“发生内部错误,您正在使用的其中

一个窗口即将关闭”的信息框,关闭该提示信息后,IE浏览器也被关闭。解决方法:

1、 开始-运行窗口,输入“regsvr32 actxprxy.dll”回车,接着会出现一个信息对话 框“DllRegisterServer in actxprxy.dll succeeded”,确定。再依次运行以下命令。

(这个方法有人说没必要,但重新注册一下那些.dll对系统也没有坏处,反正多方下手,能解决问题就行。)

regsvr32 shdocvw.dll

regsvr32 oleaut32.dll

regsvr32 actxprxy.dll

regsvr32 mshtml.dll

regsvr32 msjava.dll

regsvr32 browseui.dll

regsvr32 urlmon.dll

2、 修复或升级IE浏览器,同时打上系统补丁。看过其中一个修复方法是,把系统还原到系统初始的状态下。建议将IE升级到了6.0。

例二:有些应用程序错误: “0x7cd64998” 指令参考的 “0x14c96730” 内存。该内存不能为 “read”。解决方法:Win XP的“预读取”

技术这种最佳化技术也被用到了应用程序上,系统对每一个应用程序的前几次启动情况进行分析,然后新增一个描述套用需求的虚拟

“内存映像”,并把这些信息储存到Windows\Prefetch文件夹。一旦建立了映像,应用软件的装入速度大大提高。XP的预读取数据储存

了最近8次系统启动或应用软件启动的信息。建议将虚拟内存撤换,删除Windows\Prefetch目录下所有*.PF文件,让windows重新收集程序

的物理地址。

例三:在XP下双击光盘里面的“AutoRun.exe”文件,显示“0x77f745cc”指令引用的“0x00000078”内存。该内存不能为“written”,

要终止程序,请单击“确定”,而在Windows 98里运行却正常。 解决方法:这可能是系统的兼容性问题,winXP的系统,右键

“AutoRun.exe”文件,属性,兼容性,把“用兼容模式运行这个程序”项选择上,并选择“Windows 98/Me”。win2000如果打了SP的

补丁后,只要开始,运行,输入:regsvr32 c:\winnt\apppatch\slayerui.dll。右键,属性,也会出现兼容性的选项。

例四:RealOne Gold关闭时出现错误,以前一直使用正常,最近却在每次关闭时出现“0xffffffff”指令引用的“0xffffffff”内存。

该内存不能为“read” 的提示。 解决方法:当使用的输入法为微软拼音输入法2003,并且隐藏语言栏时(不隐藏时没问题)关闭RealOne

就会出现这个问题,因此在关闭RealOne之前可以显示语言栏或者将任意其他输入法作为当前输入法来解决这个问题。

例五:我的豪杰超级解霸自从上网后就不能播放了,每次都提示“0x060692f6”(每次变化)指令引用的“0xff000011”内存不能为

“read”,终止程序请按确定。 解决方法:试试重装豪杰超级解霸,如果重装后还会,到官方网站下载相应版本的补丁试试。还不行,

只好换就用别的播放器试试了。

例六:双击一个游戏的快捷方式,“0x77f5cd0”指令引用“0xffffffff”内存,该内存不能为“read” ,并且提示Client.dat程序错误。

解决方法:重装显卡的最新驱动程序,然后下载并且安装DirectX9.0。

例七:一个朋友发信息过来,我的电脑便出现了错误信息:“0x772b548f”指令引用的“0x00303033”内存,该内存不能为“written”,

然后QQ自动下线,而再打开QQ,发现了他发过来的十几条的信息。解决方法:这是对方利用QQ的BUG,发送特殊的代码,做QQ出错,

只要打上补丁或升级到最新版本,就没事了。

该内存不能为read或written的解决方案关键词:该内存不能为"read" 该内存不能为"written"

从网上搜索来的几篇相关文章.

【文章一】

使用Windows操作系统的人有时会遇到这样的错误信息:

「“0X????????”指令引用的“0x00000000”内存,该内存不能为“read”或“written”」,然后应用程序被关闭。

如果去请教一些「高手」,得到的回答往往是「Windows就是这样不稳定」之类的义愤和不屑。其实,这个错误并不一定是Windows

不稳定造成的。本文就来简单分析这种错误的一般原因。

一、应用程序没有检查内存分配失败

程序需要一块内存用以储存数据时,就需要使用操作系统提供的「功能函数」来申请,如果内存分配成功,函数就会将所新开辟的

内存区地址返回给应用程序,应用程序就可以通过这个地址使用这块内存。这就是「动态内存分配」,内存地址也就是编程中的「光标」。

内存不是永远都招之即来、用之不尽的,有时候内存分配也会失败。当分配失败时系统函数会返回一个0值,这时返回值「0」已

不表示新启用的游标,而是系统向应用程序发出的一个通知,告知出现了错误。作为应用程序,在每一次申请内存后都应该检查返回值

是否为0,如果是,则意味着出现了故障,应该采取一些措施挽救,这就增强了程序的「健壮性」。若应用程序没有检查这个错误,

它就会按照「思维惯性」认为这个值是给它分配的可用游标,继续在之后的执行中使用这块内存。真正的0地址内存区储存的是计算机

系统中最重要的「中断描述符表」,绝对不允许应用程序使用。在没有保护机制的操作系统下(如DOS),写数据到这个地址会导致立即当机,

而在健壮的操作系统中,如Windows等,这个操作会马上被系统的保护机制捕获,其结果就是由操作系统强行关闭出错的应用程序,

以防止其错误扩大。这时候,就会出现上述的「写内存」错误,并指出被引用的内存地址为「0x00000000」。内存分配失败故障的原因很多,

内存不够、系统函数的版本不匹配等都可能有影响。因此,这种分配失败多见于操作系统使用很长时间后,安装了多种应用程序(包括无意中

「安装」的病毒程序),更改了大量的系统参数和系统档案之后。

二、应用程序由于自身BUG引用了不正常的内存光标

在使用动态分配的应用程序中,有时会有这样的情况出现:程序试突读写一块「应该可用」的内存,但不知为什么,这个预料中可用的

光标已经失效了。有可能是「忘记了」向操作系统要求分配,也可能是程序自己在某个时候已经注销了这块内存而「没有留意」等等。

注销了的内存被系统回收,其访问权已经不属于该应用程序,因此读写操作也同样会触发系统的保护机制,企图「违法」的程序唯一的

下场就是被操作终止执行,回收全部资源。计算机世界的法律还是要比人类有效和严厉得多啊!像这样的情况都属于程序自身的BUG,

你往往可在特定的操作顺序下重现错误。无效光标不一定总是0,因此错误提示中的内存地址也不一定为「0x00000000」,而是其它随机数

字。如果系统经常有所提到的错误提示,下面的建议可能会有说明 :

1.检视系统中是否有木马或病毒。这类程序为了控制系统往往不负责任地修改系统,

从而导致操作系统异常。平常应加强信息安全意识,对来源不明的可执行程序绝不好奇。

2.更新操作系统,让操作系统的安装程序重新拷贝正确版本的系统档案、修正系统参数。

有时候操作系统本身也会有BUG,要注意安装官方发行的升级程序。

3.试用新版本的应用程序。

Mode:

将虚拟内存撤换

答案:

目前为止是肯定的,也就是如在下次冷天到来时亦没再发生,就代表这是主因

追加:

如果你用 Ghost 恢复 OS 后建议 删除WINDOWS\PREFETCH目录下所有*.PF文件因为需让windows重新收集程序的物理地址

有些应用程序错误 "0x7cd64998" 指令参考的 "0x14c96730" 内存。该内存不能为 "read"推论是此原因

源由:

Win XP的「预读取」技术

这种最佳化技术也被用到了应用软件上,系统对每一个应用软件的前几次启动情况进行分析,然后新增一个描述套用需求的虚

拟「内存映像」,并把这些信息储存到WINDOWSPREFETCH数据夹。一旦建立了映像,应用软件的装入速度大大提高。XP的预读取数

据储存了最近8次系统启动或应用软件启动的信息。

【原因 解决方法】

1 内存条坏了 更换内存条

2 双内存不兼容 使用同品牌的内存或只要一条内存

3 内存质量问题 更换内存条

4 散热问题 加强机箱内部的散热

5 内存和主板没插好或其他硬件不兼容 重插内存或换个插槽

6 硬件有问题 更换硬盘

7 驱动问题 重装驱动,如果是新系统,应先安装主板驱动

8 软件损坏 重装软件

9 软件有BUG 打补丁或更新到最新版本

10 软件和系统不兼容 给软件打上补丁或是试试系统的兼容模式

11 软件和软件之间有冲突 如果最近安装了什么新软件,卸载了试试

12 软件要使用其他相关的软件有问题 重装相关软件,比如播放某一格式的文件时出错,可能是这个文件的解码器有问题

13 病毒问题 杀毒

14 杀毒软件与系统或软件相冲突 由于杀毒软件是进入底层监控系统的,可能与一些软件相冲突,卸载试试

15 系统本身有问题 有时候操作系统本身也会有BUG,要注意安装官方发行的更新程序,象SP的补丁,最好打上.如果还不行,重装系统,

或更换其他版本的系统。

〔又一说〕

在控制面板的添加/删除程序中看看你是否安装了微软NET.Framework,如果已经安装了,可以考虑卸载它,当然如果你以后在其它程序

需要NET.Framework时候,可以再重新安装。

另外,如果你用的是ATI显卡并且你用的是SP2的补丁(一些ATI的显卡驱动需要在NET.Framework正常工作的环境下)。这种情况你可以

找一款不需要NET.Framework支持的ATI显卡驱动。

如果以上两种方法并不能完全解决问题,你试着用一下“IE修复”软件,并可以查查是否有病毒之类的。

〔微软NET.Framework升级到1.1版应该没问题了〕

〔还有一说〕

方法一:

微软新闻组的朋友指点:开始--运行:regsvr32 jscript.dll

开始--运行:regsvr32 vbscript.dll

不过没解决---但提供了路子-----一次运行注册所有dll

搜索查找到方法如下:

运行 输入cmd 回车在命令提示符下输入

for %1 in (%windir%\system32\*.dll) do regsvr32.exe /s %1

这个命令老兄你慢慢输 输入正确的话会看到飞快地滚屏 否则……否则失败就是没这效果。回车后慢慢等(需要点时间1-2分钟)

都运行完再打开看

方法二:

这是个典型问题~~~~~引起这个问题的原因很多。一般来讲就是给系统打上补丁和更换内存、给内存换个插槽这3种方法来解决。

[系统补丁只要到Microsoft Update网站在线更新就可以了]

造成这种问题的原因很多,不能单纯的下结论,尽量做到以下几点可能对你有帮助:

1。确保使用的是未修改过的软件(非汉化、破解版)

2。使用改软件时尽量不要运行其他软件。(这是个临时文件,可能某些软件也在使用临时文件夹,所以产生干扰)

3。把那些什么桌面工具,内存整理工具通通关掉(你至少有2个类似的工具在运行)”

处理方法:

运行regedit进入注册表, 在HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellExecuteHooks下,

应该只有一个正常的键值"{AEB6717E-7E19-11d0-97EE-00C04FD91972}, 将其他的删除。

〔我个人的最后解决和看法〕

我今天尝试了多种办法,最后我发现问题出在微软的NET.Framework上面。我升级了这个软件,并打齐了补丁,短暂平安后,有出现

“内存不能为read”的情况。后来我受上面文章的启发,卸载了微软的NET.Framework1.0和1.1,世界太平了。

另外:如果是打开“我的电脑”、“我的文档”等的时候出现上述情况,还有一种可能,就是你的右键菜单太臃肿了,此时只要清理

右键菜单问题就解决了。