ccyingfu
- 浏览: 71195 次
- 性别:
- 来自: 长春
-
文章分类
最新评论
-
lizhiping116：
求判断字符串中是否有空格
正则验证 -
liuzhongzhou2721：
:
正则验证 -
liuzhongzhou2721：
正则验证 -
liuzhongzhou2721：
[img][/img]
正则验证 -
liuzhongzhou2721：
来看看了，好东西呀
正则验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time</title>
<script type="text/javascript">
var MTime = window.MTime || {}
MTime.Tools = {
g : function(id){
return "string" == typeof id ? document.getElementById(id) : id;
},
c : function(tagName){
return document.createElement(tagName);
},
b : function(){
return document.body
}
}
MTime.Vtime = (function(){
var vLine = function(x, y, z, color){
return "<div style='top:"+y+"px;left:"+x+"px;background-color:"+color+";width:1px;height:"+z+"px;position:absolute;font-size:0'></div>";
};
var hLine = function(x, y, z, color){
return "<div style='top:"+y+"px;left:"+x+"px;background-color:"+color+";width:"+z+"px;height:1px;position:absolute;font-size:0'></div>";
};
var getNum = function(i,z,c){
var time = "";
switch(i){
case 1 : {
time = vLine(z, 0, z, c)+vLine(z, z, z, c);
}break;
case 2 : {
time = hLine(0, 0, z, c)+vLine(z, 0, z, c)+hLine(0, z, z, c)
+vLine(0, z, z, c)+hLine(0, z*2, z, c);
}break;
case 3 : {
time = hLine(0, 0, z, c)+vLine(z, 0, z, c)+hLine(0, z, z, c)
+vLine(z, z, z, c)+hLine(0, z*2, z, c);
}break;
case 4 : {
time = vLine(0, 0, z, c)+vLine(z, 0, z, c)+hLine(0, z, z, c)
+vLine(z, z, z, c);
}break;
case 5 : {
time = hLine(0, 0, z, c)+vLine(0, 0, z, c)+hLine(0, z, z, c)
+vLine(z, z, z, c)+hLine(0, z*2, z, c);
}break;
case 6 : {
time = hLine(0, 0, z, c)+vLine(0, 0, z, c)+hLine(0, z, z, c)
+vLine(z, z, z, c)+hLine(0, z*2, z, c)+vLine(0, z, z, c);
}break;
case 7 : {
time = hLine(0, 0, z, c)+vLine(z, z, z, c)+vLine(z, 0, z, c);
}break;
case 8 : {
time = vLine(0, 0, z, c)+vLine(0, z, z, c)+vLine(z,0, z, c)
+vLine(z, z, z, c)+hLine(0, 0, z, c)+hLine(0,z*2, z, c)
+hLine(0, z, z, c);
}break;
case 9 : {
time = vLine(0, 0, z, c)+vLine(z, 0, z, c)
+vLine(z, z, z, c)+hLine(0, 0, z, c)+hLine(0, z*2, z, c)
+hLine(0, z, z, c);
}break;
default :{
time = vLine(0, 0, z, c)+vLine(0, z, z, c)+vLine(z, 0, z, c)
+vLine(z, z, z, c)+hLine(0, 0, z, c)+hLine(0, z*2, z, c);
}
}
return time;
};
return function(i, z, c){
var wrap = MTime.Tools.c("div");
this.num = getNum(i, z, c);
with(wrap.style){
width = z+"px";
height = 2*z+"px";
position = "relative";
document.all ? styleFloat = "left" : cssFloat = "left";
margin = z/2+"px";
}
wrap.innerHTML = this.num;
this.getWrap = function(){
return wrap;
}
}
})()
window.onload = function(){
var lineLen = 6;
var lineColor = "red";
/*
for(var i = 0; i <= 9; i++){
var vtime = new MTime.Vtime(i, lineLen, lineColor);
MTime.Tools.b().appendChild(vtime.getWrap());
}
*/
window.setInterval(function(){
MTime.Tools.b().innerHTML = "";
var date = new Date();
var dateStr = date.getFullYear()+"-"
+((date.getMonth()+1) < 10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1))+"-"
+(date.getDate() < 10 ? "0"+date.getDate() : date.getDate()) +" "
+(date.getHours() < 10 ? "0"+date.getHours() : date.getHours())+":"
+(date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes())+":"
+(date.getSeconds() < 10 ? "0"+date.getSeconds() : date.getSeconds())+" "
+(date.getMilliseconds() < 10 ? "00"+date.getMilliseconds():date.getMilliseconds());
for(var i = 0; i < dateStr.length; i++){
if(/\d/.test(dateStr.charAt(i))){
var vtime = new MTime.Vtime(parseInt(dateStr.charAt(i)), lineLen, lineColor);
MTime.Tools.b().appendChild(vtime.getWrap());
}
else{
var hl = MTime.Tools.c("div");
with(hl.style){
width = "12px";
height = "12px";
lineHeight = "12px";
document.all ? styleFloat = "left" : cssFloat = "left";
}
if(dateStr.charAt(i) == "-")
hl.innerHTML = '<div style="width:12px;height:12px;margin:3px auto">-</div>';
else if(dateStr.charAt(i) == ":")
hl.innerHTML = '<div style="width:12px;height:12px;margin:3px auto">:</div>';
else
hl.innerHTML = '<div style="width:12px;height:12px;margin:3px auto"></div>';
MTime.Tools.b().appendChild(hl);
}
}
},1);
}
</script>
</head>
<body>
</body>
</html>
分享到：
发表评论
-
AMD研究，组件的动态加载。
2013-11-23 14:41 666研究了一下dojo的ADM。明白组件的加载机制了。 (fu ... -
代码分行
2011-08-27 22:57 772<!DOCTYPE html"> ... -
Date
2011-08-26 19:49 882//全局函数 Date //Date 类的 ... -
百度地图
2011-07-12 15:38 1336<html> < ... -
TEST_INEDITOR
2011-06-29 06:47 659<!DOCTYPE html PUBLIC " ... -
浏览器判断
2011-06-25 14:55 980B = (function(ua){ var b = ... -
循环添加事件
2011-06-24 14:05 882var nodes = this.tree.rootNod ... -
上下选择
2011-06-18 22:07 827<!DOCTYPE html PUBLIC &quo ... -
简易向上的滚动
2011-06-18 17:55 721<!DOCTYPE html PUBLIC &quo ... -
JS中获取各种窗口大小
2011-05-29 17:11 684网页可见区域宽：document.body.clientWid ... -
两点间直线
2011-05-29 17:10 673function getLineDot(a, b){ ... -
Dojo类似Jquery操作DOM的方法
2011-05-19 10:18 1767导入NodeList-traverse包 dojo.req ... -
多对象inherit
2011-05-14 10:04 763var Tool = {}; Tool._mixin = ... -
字符串连接和StringBuffer的对比
2010-08-10 06:31 874function StringBuffer () { ... -
获得Event对象
2010-07-08 11:31 1046function getEvent(){ //同时 ... -
根据类名获得元素
2010-06-30 18:22 990/** * 根据类名获得元素 * 参数说明: ... -
UUID生成器_Javascript版
2010-06-26 11:31 2416/* uuid.js - Version 0.3 ... -
类百度的小贴士
2010-06-26 10:22 718这是好久以前写的，当时正在学习Javascript。看见百度空 ... -
禁止IE下右键等功能
2010-06-23 15:05 858window.setInterval(function() ... -
call、apply、caller、callee使用方法
2010-06-15 18:41 912一、call 方法 调用一个 ...
相关推荐
JavaScript时间控件是一种在网页上实现用户交互式时间选择功能的工具，通常用于表单输入或者日历插件等场景。这种控件允许用户通过图形界面来选择或输入时间，而不是传统的文本输入框，提高了用户体验和数据准确性。...
JavaScript时间刻度尺插件是一种用于可视化时间轴的工具，常用于数据展示、日程管理或图表绘制等场景。它能够帮助用户清晰地看到时间序列上的各个关键点，提高数据的可读性和交互性。在本文中，我们将深入探讨这个...
本文将围绕“javascript时间显示各种特效”这一主题，详细讲解JavaScript在处理时间显示上的常见技巧和特效。 1. **时间格式化**： JavaScript中的Date对象是处理日期和时间的基础。我们可以使用`Date()`构造函数...
javascript时间特效
JavaScript时间倒计时器是一种常见的前端开发功能，用于显示特定日期或时间点之前的剩余时间。在网页中，这种倒计时器通常用于促销活动、竞赛结束或者重要事件的预告等场景。下面我们将深入探讨如何使用JavaScript来...
JavaScript时间转换源代码是用于处理和格式化日期与时间的代码片段，它允许开发者将时间数据转换为不同的格式，以满足各种应用场景的需求。在Web开发中，JavaScript是客户端编程的主要语言，因此掌握时间处理技巧...
JavaScript时间滑动条是一种用户界面元素，用于让用户以直观的方式选择或输入时间。它通常包含一个可拖动的滑块，表示时间的流逝，而滑块的位置则对应于特定的时间值。这种控件在需要用户指定时间范围或者精确时间点...
JavaScript时间选择控件是一种在网页上提供用户交互式时间选择功能的组件，通常用于收集用户的日期和时间输入，如在填写表单时选择生日。这种控件通过CSS（层叠样式表）和JavaScript来实现，使得用户界面既美观又...
JavaScript时间日历控件是网页开发中常用的一种组件，它为用户提供了一种直观的方式来选择日期或时间。在Web应用程序中，这种控件可以极大提升用户体验，尤其在处理表单输入或者进行时间相关的交互时。JavaScript...
在给定的压缩包文件中，提供了15个关于JavaScript时间处理和数组操作的实例，这对于初学者深入理解这两个重要概念非常有帮助。 首先，我们要讨论的是JavaScript中的时间处理。在JavaScript中，我们可以使用内置的`...
JavaScript时间案例子主要涉及到在JavaScript中处理日期和时间的各种技巧和方法。JavaScript作为一种客户端脚本语言，其内置的Date对象是处理时间的核心工具。在这个案例中，我们将深入探讨如何使用JavaScript来创建...
【标题】：“Megamijs javascript时间轴演示 点击移动 和 拖动和跟随效果.zip”揭示了使用JavaScript库创建动态时间轴交互的实践。这个压缩包包含了一个使用MegamiJS实现的时间轴示例，它允许用户通过点击、移动以及...
JavaScript时间控件是一种在网页上实现用户交互式时间选择功能的程序组件，它允许用户通过图形界面方便地选择或输入时间。在Web开发中，这种控件常常用于表单填写、事件调度或者其他需要精确时间输入的场景。...
JavaScript时间控制是编程中不可或缺的一部分，它涉及到对日期和时间的操作、定时任务的设定以及动态更新界面的时间显示。在JavaScript中，我们可以使用内置的Date对象来处理与日期和时间相关的工作，同时结合...
JavaScript时间控件是一种在网页上实现交互式时间选择功能的组件，它允许用户通过图形界面选取特定的时间点或时间段。这种控件常用于在线预订系统、表单填写、时间安排等场景，为用户提供便捷的时间输入方式。在...
JavaScript时间控件是一种在网页上实现用户交互式时间选择功能的工具，通常用于表单输入或者日历应用等场景。JavaScript作为一个强大的客户端脚本语言，提供了丰富的API来处理时间与日期，使得我们可以创建各种定制...