转 在b/s开发中经常用到的javaScript技术
在b/s开发中经常用到的javaScript技术
|
一、验证类 二、功能类 1、时间与相关控件类 一、验证类 3.7 复选框的全选,多选,全不选,反选 <input type=checkbox name=All2 οnclick="checkAll('mm2')">全选<br/> </form> <SCRIPT LANGUAGE="JavaScript"> 3.8 文件上传过程中判断文件类型 画图: 写注册表: TABLAE相关(客户端动态增加行列) 1.身份证严格验证: <script> document.write(cidInfo("380524198002300016"),"<br/>"); 2.验证IP地址 var s="202.197.78.129"; 3.加sp1后还能用的无边框窗口!! <SCRIPT LANGUAGE="JScript"> /* /*--- Thanks For andot Again ---*/ var CW_width = 400; //Build Window function insert_content(){ setTimeout("insert_content()",1000); var if_max = true; window.onfocus = show_CW; // Move Window function drag_move(e){ function drag_down(e){ function drag_up(e){ </SCRIPT> 电话号码的验证 要求: <script language="javascript"> 具有在输入非数字字符不回显的效果,即对非数字字符的输入不作反应。 验证ip str=document.RegExpDemo.txtIP.value; |
//一下是取数据的类
//Obj参数指定数据的来源(限定Table),默认第一行为字段名称行
//GetTableData类提供MoveNext方法,参数是表的行向上或向下移动的位数,正数向下移动,负数向上.
//GetFieldData方法获得指定的列名的数据
//Sort_desc方法对指定的列按降序排列
//Sort_asc方法对指定的列按升序排列
//GetData方法返回字段值为特定值的数据数组,提供数据,可以在外部进行其他处理
//Delete方法删除当前记录,数组减少一行
//初始化,Obj:table的名字,Leftlen:左面多余数据长度,Rightlen:右面多余数据长度,
function GetTableData(Obj,LeftLen,RightLen){
var MyObj=document.all(Obj);
var iRow=MyObj.rows.length;
var iLen=MyObj.rows[0].cells.length;
var i,j;
TableData=new Array();
for (i=0;i< iRow;i++){
TableData[i]=new Array();
for (j=0;j<iLen;j++){
TableStr=MyObj.rows(i).cells(j).innerText;
TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim();
TableStr=TableStr.replace(/ /gi,"").replace(/\r\n/ig,"");
TableData[i][j]=TableStr;
}
}
this.TableData=TableData;
this.cols=this.TableData[0].length;
this.rows=this.TableData.length;
this.rowindex=0;
}
function movenext(Step){
if (this.rowindex>=this.rows){
return
}
if (Step=="" || typeof(Step)=="undefined") {
if (this.rowindex<this.rows-1)
this.rowindex++;
return;
}
else{
if (this.rowindex + Step<=this.rows-1 && this.rowindex + Step>=0 ){
this.rowindex=this.rowindex + Step;
}
else
{
if (this.rowindex + Step<0){
this.rowindex= 0;
return;
}
if (this.rowindex + Step>this.rows-1){
this.rowindex= this.rows-1;
return;
}
}
}
}
function getfielddata(Field){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
colindex=Field;
}
else
{
for (i=0;i<this.cols && this.rowindex<this.rows ;i++){
if (this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if (colindex!=-1) {
return this.TableData[this.rowindex][colindex];
}
}
function sort_desc(){//降序
var colindex=-1;
var highindex=-1;
desc_array=new Array();
var i,j;
for (n=0; n<arguments.length; n++){
Field=arguments[arguments.length-1-n];
for (i=0;i<this.cols;i++){
if (this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if ( colindex==-1 )
return;
else
{
desc_array[0]=this.TableData[0];
for(i=1;i<this.rows;i++){
desc_array[i]=this.TableData[1];
highindex=1;
for(j=1;j<this.TableData.length;j++){
if (desc_array[i][colindex]<this.TableData[j][colindex]){
desc_array[i]=this.TableData[j];
highindex=j;
}
}
if (highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));
}
}
this.TableData=desc_array;
}
return;
}
function sort_asc(){//升序
var colindex=-1;
var highindex=-1;
var i,j;
for (n=0; n<arguments.length; n++){
asc_array=new Array();
Field=arguments[arguments.length-1-n];
for (i=0;i<this.cols;i++){
if (this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if ( colindex==-1 )
return;
else
{
asc_array[0]=this.TableData[0];
for(i=1;i<this.rows;i++){
asc_array[i]=this.TableData[1];
highindex=1;
for(j=1;j<this.TableData.length;j++){//找出最小的列值
if (asc_array[i][colindex]>this.TableData[j][colindex]){
asc_array[i]=this.TableData[j];
highindex=j;
}
}
if (highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));
}
}
this.TableData=asc_array;
}
return;
}
function getData(Field,FieldValue){
var colindex=-1;
var i,j;
GetData=new Array();
if (typeof(Field)=="undefined" || typeof(FieldValue)=="undefined" ){
return this.TableData;
}
for(j=0;j<this.cols;j++){
if (this.TableData[0][j]==Field){
colindex=j;
}
}
if (colindex!=-1){
for(i=1;i<this.rows;i++){
if (this.TableData[i][colindex]==FieldValue){
GetData[i]=new Array();
GetData[i]=this.TableData[i];
}
}
}
return GetData;
}
function DeletE(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length));
this.rows=this.TableData.length;
return;
}
function updateField(Field,FieldValue){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
colindex=Field;
}
else
{
for (i=0;i<this.cols && this.rowindex<this.rows ;i++){
if (this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if (colindex!=-1) {
this.TableData[this.rowindex][colindex]=FieldValue;
}
}
function movefirst(){
this.rowindex=0;
}
function movelast(){
this.rowindex=this.rows-1;
}
function String.prototype.Trim() {return this.replace(/(^\s*)|(\s*$)/g,"");}
GetTableData.prototype.MoveNext = movenext;
GetTableData.prototype.GetFieldData = getfielddata;
GetTableData.prototype.Sort_asc = sort_asc;
GetTableData.prototype.Sort_desc = sort_desc;
GetTableData.prototype.GetData = getData;
GetTableData.prototype.Delete = DeletE;
GetTableData.prototype.UpdateField = updateField;
GetTableData.prototype.MoveFirst = movefirst;
具体的例子:http://202.119.73.208/NetEAn/com/test/jsprint.htm
在每个文本框的onblur事件中调用校验代码,并且每个文本框中onKeyDown事件中写一个enter转tab函数
//回车键换为tab
function enterToTab()
{
if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}
有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:)
//===============================start================================
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>测试修改表格</TITLE>
<STYLE>
/*提示层的样式*/
div
{
BORDER-RIGHT: #80c144 1px solid;
BORDER-TOP: #80c144 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: #80c144 1px solid;
CURSOR: default;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: #80c144 1px solid;
FONT-FAMILY: 宋体;
font-size:12px;
POSITION: absolute;
BACKGROUND-COLOR: #f6f6f6;
TOP:30px;
LEFT:30px;
}
/*tr的样式*/
tr
{
font-family: "宋体";
color: #000000;
background-color: #C1DBF5;
font-size: 12px
}
/*table脚注样式*/
.TrFoot
{
FONT-SIZE: 12px;
font-family:"宋体", "Verdana", "Arial";
BACKGROUND-COLOR: #6699CC;
COLOR:#FFFFFF;
height: 25;
}
/*trhead属性*/
.TrHead
{
FONT-SIZE: 13px;
font-family:"宋体", "Verdana", "Arial";
BACKGROUND-COLOR: #77AADD;
COLOR:#FFFFFF;
height: 25;
}
/*文本框样式*/
INPUT
{
BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid;
FONT-SIZE: 12px;
FONT-FAMILY: "宋体","Verdana";
color: #000000;
BACKGROUND-COLOR: #E9EFF5;
}
/*button样式*/
button
{
BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
BACKGROUND-COLOR: #D5E4F3;
CURSOR: hand;
FONT-SIZE:12px;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid;
COLOR: #000000;
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language = "JavaScript">
<!--全局变量
//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑
var editer_table_cell_tag = false;
//开启编辑功能标志,值为true时为允许编辑
var run_edit_flag = false;
//-->
</SCRIPT>
<SCRIPT language = "JavaScript">
<!--
/**
* 编辑表格函数
* 单击某个单元格可以对里面的内容进行自由编辑
* @para tableID 为要编辑的table的id
* @para noEdiID 为不要编辑的td的ID,比如说table的标题
* 可以写为<TD id="no_editer">自由编辑表格</TD>
* 此时该td不可编辑
*/
function editerTableCell(tableId,noEdiId)
{
var tdObject = event.srcElement;
var tObject = ((tdObject.parentNode).parentNode).parentNode;
if(tObject.id == tableId &&tdObject.id != noEdiId&&editer_table_cell_tag == false && run_edit_flag == true)
{
tdObject.innerHTML = "<input type=text id=edit_table_txt name=edit_table_txt value="+tdObject.innerText+" size='15' onKeyDown='enterToTab()'> <input type=button value=' 确定 ' οnclick='certainEdit()'>";
edit_table_txt.focus();
edit_table_txt.select();
editer_table_cell_tag = true;
//修改按钮提示信息
editTip.innerText = "请先点确定按钮确认修改!";
}
else
{
return false;
}
}
/**
* 确定修改
*/
function certainEdit()
{
var bObject = event.srcElement;
var tdObject = bObject.parentNode;
var txtObject = tdObject.firstChild;
tdObject.innerHTML = txtObject.value;
//代表编辑框已经关闭
editer_table_cell_tag = false;
//修改按钮提示信息
editTip.innerText = "请单击某个单元格进行编辑!";
}
function enterToTab()
{
if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}
/**
* 控制是否编辑
*/
function editStart()
{
if(event.srcElement.value == "开始编辑")
{
event.srcElement.value = "编辑完成";
run_edit_flag = true;
}
else
{
//如果当前没有编辑框,则编辑成功,否则,无法提交
//必须按确定按钮后才能正常提交
if(editer_table_cell_tag == false)
{
alert("编辑成功结束!");
event.srcElement.value = "开始编辑";
run_edit_flag = false;
}
}
}
/**
* 根据不同的按钮提供不同的提示信息
*/
function showTip()
{
if(event.srcElement.value == "编辑完成")
{
editTip.style.top = event.y + 15;
editTip.style.left = event.x + 12;
editTip.style.visibility = "visible";
}
else
{
editTip.style.visibility = "hidden";
}
}
-->
</SCRIPT>
<TABLE id="editer_table" width="100%" align="center"
οnclick="editerTableCell('editer_table','no_editer')">
<TR class="TrHead">
<TD colspan="3" align="center" id="no_editer">自由编辑表格</TD>
</TR>
<TR>
<TD width="33%">单击开始编辑按钮,然后点击各单元格编辑</TD>
<TD width="33%">2</TD>
<TD width="33%">3</TD>
</TR>
<TR>
<TD width="33%">4</TD>
<TD width="33%">5</TD>
<TD width="33%">6</TD>
</TR>
<TR>
<TD width="33%">one</TD>
<TD width="33%">two</TD>
<TD width="33%">three</TD>
</TR>
<TR>
<TD width="33%">four</TD>
<TD width="33%">five</TD>
<TD width="33%">six</TD>
</TR>
<TR class="TrFoot">
<TD colspan="3" align="center" id="no_editer">
<INPUT type="button" class="bt" value="开始编辑" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';">
</TD>
</TR>
</TABLE>
</BODY>
<DIV id="editTip">请单击某个单元格进行编辑!</DIV>
</HTML>
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=107993
转载于:https://www.cnblogs.com/duliang/archive/2006/10/07/522875.html
转 在b/s开发中经常用到的javaScript技术相关推荐
- 列举web开发中,为满足高性能的架构技术实现
在网站开发中,如果一个网站成功了,那技术问题,尤其是提高性能的技术问题也相应的解决了. 1.把网站的提供应用和数据库分开在两个物理的机器上.一个提供数据,一个显示数据.这个应该就是应用和数据库的物理分 ...
- 移动网站开发中常用的10段JavaScript代码
在开发移动网站过程中,有一些Javascript代码会经常用到.以下是10段常用的JavaScript代码.需要注意的是某几段代码需要jQuery mobile framework支持. 1.如果网页 ...
- 全方位地介绍JavaScript开发中的各个主题《JavaScript编程全解》(好书分享更新中)
JavaScript编程全解 作者: [日]井上诚一郎 / [日]土江拓郎 / [日]滨边将太 出版社: 人民邮电出版社 译者: 陈筱烟 内容简介 · · · · · · 本书全方位地介绍了Java ...
- iOS 开发中的得力鲁班尺 - SnapKit | 掘金技术征文
SnapKit 先来谈谈何为 DSL DSL(Domain Specific Language),即领域特定语言,指的是一种针对特定问题的编程语言,与此相对便是 GPL(General Purpose ...
- 【不定期更新】游戏开发中的一些良好习惯与技术技巧
平时programing时想到和积累的一些小技巧,在这里写成一篇日志,欢迎拍砖. <技巧一> 使用二进制位移运算来进行乘数是2的幂的简单整数乘法(除法),因为所有的数据在计算机中都是以二进 ...
- 区块链技术在软件开发中的应用
如果你是一名软件开发者或者IT从业者,你一定已经听说过区块链技术.区块链是一种基于密码学的分布式账本技术,被广泛应用于数字货币.金融.物联网等领域.但是,除了这些领域之外,区块链技术还可以在软件开发中 ...
- App开发中如何实现灰度发布?
灰度发布是指将新版本应用程序推送给一部分用户进行测试和反馈的过程,而小程序容器技术则是将小程序运行在应用程序内部的技术,可以更快速.更安全.更好地发布和优化小程序. 在本文中,我们将探讨在App开发中 ...
- iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 0.问题来源 在移动hybrid开发,也就是说,部分页面会使用html+css+javascript技术来制作,例如个人 ...
- java ee有哪些工具_JavaEE开发中最常用到的技术和工具汇总
原标题:JavaEE开发中最常用到的技术和工具汇总 今天千锋广州小编给大家来介绍一下关于目前JavaEE开发中最常用到的技术和工具的介绍,下面我们一起来看一下吧. 项目管理:Ant,项目管理事实上的标 ...
最新文章
- spring Bean自动装配
- Linux下addr2line命令用法
- FSWD_1_BasicHtmlCss
- ArcGIS网络分析之构建网络分析数据集(一)
- WebIDE,让开发更简单
- 在python中用import或者from_[转]python基础之---import与from...import....
- 【Java】Collection集合和泛型
- php登陆项目,ThinkPHP6项目基操(14.实战部分 中间件处理登录流程)
- nignx处理Html中SSI技术代码注意事项
- Erlang中的record与宏
- VMRC开启拷贝粘贴
- python调用通达信函数用户指标_通达信公式之间如何调用,如何引用通达信tdxwave指标...
- 思科配置系统日志服务器配置,思科路由器 设置日志服务器配置
- 企业微信授权登录实例代码(仅仅获取过程)
- 王者荣耀服务器维护什么时间结束,3月26日全服不停机更新公告
- 关于 PHP 的框架 phalcon 学习(一) url 路由过程。
- TResNet学习笔记 --- TResNet: High Performance GPU-Dedicated Architecture
- 更改linux终端登录欢迎界面
- Unity 之 关于停止协程的五种方式解析
- Linux系统启动U盘制作工具
热门文章
- npm package.json文件解读
- NestedScrollView平滑滑动嵌套 Fling
- 利用Delphi的File Of Type创建并管理属于你自己的数据库
- C# this关键字
- Cuyahoga的安装及结构
- ExoPlayer 开发者指导
- 简明深度学习方法概述 Deep Learning:Methods and Application
- 模态框之Uncaught Error: Syntax error, unrecognized expression:
- CSS 选择器参考手册
- Shell命令-文件及目录操作之mkdir、mv