`
hereson
  • 浏览: 1453732 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

javascript小技巧<二>

阅读更多
//各种尺寸
s  +=  "\r\n网页可见区域宽:"+  document.body.clientWidth;  
s  +=  "\r\n网页可见区域高:"+  document.body.clientHeight;  
s  +=  "\r\n网页可见区域高:"+  document.body.offsetWeight  +"  (包括边线的宽)";  
s  +=  "\r\n网页可见区域高:"+  document.body.offsetHeight  +"  (包括边线的宽)";  
s  +=  "\r\n网页正文全文宽:"+  document.body.scrollWidth;  
s  +=  "\r\n网页正文全文高:"+  document.body.scrollHeight;  
s  +=  "\r\n网页被卷去的高:"+  document.body.scrollTop;  
s  +=  "\r\n网页被卷去的左:"+  document.body.scrollLeft;  
s  +=  "\r\n网页正文部分上:"+  window.screenTop;  
s  +=  "\r\n网页正文部分左:"+  window.screenLeft;  
s  +=  "\r\n屏幕分辨率的高:"+  window.screen.height;  
s  +=  "\r\n屏幕分辨率的宽:"+  window.screen.width;  
s  +=  "\r\n屏幕可用工作区高度:"+  window.screen.availHeight;  
s  +=  "\r\n屏幕可用工作区宽度:"
+  window.screen.availWidth;  

//过滤数字

<input type=text onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)" onpaste="return !clipboardData.getData('text').match(/\D/)" ondragenter="return false">

 

//特殊用途

<input type=button value=导入收藏夹 onclick="window.external.ImportExportFavorites(true,'http://localhost');">
<input type=button value=导出收藏夹 onclick="window.external.ImportExportFavorites(false,'http://localhost');">
<input type=button value=整理收藏夹 onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)">
<input type=button value=语言设置   onclick="window.external.ShowBrowserUI('LanguageDialog', null)">
<input type=button value=加入收藏夹 onclick="window.external.AddFavorite('http://www.google.com/', 'google')">
<input type=button value=加入到频道 onclick="window.external.addChannel('http://www.google.com/')">
<input type=button value=加入到频道 onclick="window.external.showBrowserUI('PrivacySettings',null)"
>

 

//不缓存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0"
>

 

 

 


//正则匹配

 

匹配中文字符的正则表达式: [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内):[^\x00-\xff]
匹配空行的正则表达式:\n[\s| ]*\r
匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/ 
匹配首尾空格的正则表达式:(^\s*)|(\s*$)(像vbscript那样的trim函数)
匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式:http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
以下是例子:
利用正则表达式限制网页表单里的文本框输入内容:
用正则表达式限制只能输入中文:onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"
1.用正则表达式限制只能输入全角字符: onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"
2.用正则表达式限制只能输入数字:onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
3.用正则表达式限制只能输入数字和英文:onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

//消除图像工具栏

<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false"
or
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>

 

//无提示关闭

function Close()
{
 var ua=navigator.userAgent
 var ie=navigator.appName=="Microsoft Internet Explorer"?true:false
 if(ie)
 {
      var IEversion=parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))))
  if(IEversion< 5.5)
  {
   var str  = '<object id=noTipClose classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">'
       str += '<param name="Command" value="Close"></object>';
       document.body.insertAdjacentHTML("beforeEnd", str);
       document.all.noTipClose.Click();
  }
      else
  {
       window.opener =null
;
       window.close();
      }
   }
 else
 {
  window.close()
   }
}

//取得控件得绝对位置(1)

<script language="javascript"
function getoffset(e)

 var t=e.offsetTop; 
 var l=e.offsetLeft; 
 while(e=e.offsetParent)
 { 
  t+=e.offsetTop; 
  l+=e.offsetLeft; 
 } 
 var rec = new Array(1);
 rec[0]  = t;
 rec[1] = l;
 return rec

</script>

//获得控件的绝对位置(2)

oRect = obj.getBoundingClientRect();
oRect.left
oRect.

//最小化,最大化,关闭

<object id=min classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"
<param name="Command" value="Minimize"></object> 
<object id=max classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"
<param name="Command" value="Maximize"></object> 
<OBJECT id=close classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
<PARAM NAME="Command" value="Close"
></OBJECT> 
<input type=button value=最小化 onclick=min.Click()> 
<input type=button value=最大化 onclick=max.Click()> 
<input type=button value=关闭 onclick=close.Click()> 

 

 

 

//光标停在文字最后

 

<script language="javascript">
function cc()
{
 var e = event.srcElement;
 var r =e.createTextRange();
 r.moveStart('character',e.value.length);
 r.collapse(true);
 r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()"
>

//页面进入和退出的特效

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使
用哪种特效,取值为1-23:
  0 矩形缩小 
  1 矩形扩大 
  2 圆形缩小
  3 圆形扩大 
  4 下到上刷新 
  5 上到下刷新
  6 左到右刷新 
  7 右到左刷新 
  8 竖百叶窗
  9 横百叶窗 
  10 错位横百叶窗 
  11 错位竖百叶窗
  12 点扩散 
  13 左右到中间刷新 
  14 中间到左右刷新
  15 中间到上下
  16 上下到中间 
  17 右下到左上
  18 右上到左下 
  19 左上到右下 
  20 左下到右上
  21 横条 
  22 竖条 
  23 
分享到:
评论

相关推荐

    【前端】<div>的排版练习【HTML+CSS+JavaScript(JS)】

    总结起来,这个练习旨在通过HTML的`&lt;div&gt;`标签,配合CSS的布局技巧和JavaScript的交互功能,提高开发者对前端排版的理解和实践能力。通过这个练习,开发者不仅能掌握基础的网页布局技巧,还能进一步熟悉动态页面的...

    HTML的一些用法及技巧(适合新手)

    字体和样式标签如`&lt;STRONG&gt;`和`&lt;B&gt;`用于加粗文本,`&lt;EM&gt;`和`&lt;I&gt;`用于斜体,`&lt;TT&gt;`呈现等宽字体,`&lt;U&gt;`添加下划线,`&lt;H1&gt;`到`&lt;H6&gt;`定义不同级别的标题,`&lt;FONT&gt;`设定字体、大小和颜色(但现在不推荐使用),`&lt;BIG&gt;`和...

    常用javascript整理

    1.JavaScript的数值处理对象学习 .txt&lt;br&gt;2.JavaScript的系统函数学习 .txt&lt;br&gt;3.js中用于对象的语句——with和for...in语句学习专题.txt&lt;br&gt;4.smallSoftkey小软键盘,...正则表达式.txt&lt;br&gt;9.55种网页常用小技巧 .txt

    GridView实用技巧集锦

    GridView实用技巧集锦:&lt;br&gt;1 GridView无代码分页排序&lt;br&gt;2 GridView选中,编辑,取消,删除&lt;br&gt;3 GridView正反双向排序&lt;br&gt;4 GridView和下拉菜单DropDownList结合&lt;br&gt;5 GridView和CheckBox结合&lt;br&gt;6鼠标移到...

    javaScript小技巧。

    根据提供的文件内容,我们可以总结出以下几个JavaScript小技巧及相关知识点: ### 1. 引入外部JavaScript文件 在HTML文档中,可以通过`&lt;script&gt;`标签引入外部JavaScript文件来执行脚本代码。例如: ```html ...

    用javascript地址栏显示源码

    此方法不仅适用于开发者快速预览和调试页面结构,对于学习前端技术的新手而言也是一个非常实用的小技巧。 #### JavaScript与HTML源码 在Web开发中,HTML(HyperText Markup Language)是用于创建网页的标准标记...

    动态网页爱心源码,支持修改文字和音乐

    4. **音乐播放**:源码可能会使用HTML5的`&lt;audio&gt;`标签来播放背景音乐,用户可以通过JavaScript来控制音乐的播放、暂停、音量等。为了兼容不同的浏览器,可能还需要引入像`howler.js`这样的音频库来处理音频播放。 ...

    大学里的HTML课件

    在&lt;head&gt;中,我们通常设置页面标题(&lt;title&gt;)、引入外部CSS样式表(&lt;link&gt;)或JavaScript文件(&lt;script&gt;)。在&lt;body&gt;中,才是实际可见的网页内容。 在HTML中,文本元素是最基本的组成部分,如段落(&lt;p&gt;)、标题(...

    HTML 语言教程.rar

    3. 标题标签:`&lt;h1&gt;`至`&lt;h6&gt;`,数字越大,标题级别越小。 4. 链接:`&lt;a href="url"&gt;链接文字&lt;/a&gt;`,`href`属性指定链接地址。 5. 图像:`&lt;img src="url" alt="替代文本"&gt;`,`src`属性指定图片URL,`alt`提供替代文本...

    html入门教程

    &lt;h2&gt;二级标题&lt;/h2&gt; ...` 2. 段落标签:&lt;p&gt;和&lt;/p&gt;用于定义文本段落。连续的&lt;p&gt;标签会形成连续的段落,而&lt;br&gt;标签则用于在不开始新段落的情况下进行换行,如: `&lt;p&gt;这是第一段。&lt;/p&gt; &lt;br&gt; &lt;p&gt;这是第二段,但没有...

    网页代码常用小技巧

    表格使用&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;等标签创建,而表单元素如&lt;input&gt;, &lt;select&gt;, &lt;textarea&gt;等用于用户交互。记住,表单可以通过action属性指定提交处理页面,method属性设置提交方式(GET或POST)。 6. **图片与...

    select option带自定义图片

    然而,原生的`&lt;option&gt;`元素并不支持直接添加图片,但通过一些JavaScript和CSS的技巧,我们可以实现自定义带有图片的`&lt;option&gt;`效果。以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 ...

    html语法教程下载

    - `&lt;div&gt;`和`&lt;span&gt;`提供布局灵活性,常与CSS结合使用。 ### 示例代码 ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;网页制作教学&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;欢迎来到HTML教程&lt;/h1&gt; &lt;p&gt;这是一个简单的段落...

    html学习笔记

    此外,还可以使用`&lt;link&gt;`引入外部样式表,`&lt;script&gt;`引入JavaScript代码,以增强页面交互性。 HTML的主体由`&lt;body&gt;`标签包裹,它包含了页面的实际内容。主体可以设置背景颜色、图片,以及文字颜色等样式属性。`...

    详细的HTML+CSS+JavaScript网页设计.pdf

    &lt;li&gt;&lt;a href="#introduction"&gt;介绍&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#projects"&gt;项目展示&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#skills"&gt;技能概览&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;联系方式&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; ``` ...

    html.zip

    例如,`&lt;p&gt;`用于定义段落,`&lt;h1&gt;`到`&lt;h6&gt;`定义不同级别的标题,`&lt;a&gt;`用于创建超链接,`&lt;img&gt;`插入图片,`&lt;ul&gt;`和`&lt;ol&gt;`创建无序和有序列表,`&lt;div&gt;`作为布局容器等。 3. **属性与值**:HTML标签可以有属性,属性...

    HTML编码参考手册全

    `&lt;head&gt;`中可以包含`&lt;title&gt;`定义页面标题,`&lt;meta&gt;`标签设置元信息,以及`&lt;link&gt;`和`&lt;script&gt;`标签引入外部资源如CSS样式表和JavaScript脚本。 CSS(Cascading Style Sheets)常与HTML结合使用,用于定义页面的...

    HTML使用手册

    `&lt;span&gt;`用于在行内元素中插入小范围的样式。 三、HTML属性 标签可以有零个或多个属性,用来提供额外的信息。例如: 1. `class`属性用于关联CSS类,定义样式。 2. `id`属性为元素提供唯一的标识符,常用于...

    HTML 语言教程电子书

    而`&lt;script&gt;`标签引入JavaScript代码,实现动态效果和用户交互。 六、HTML5的新特性 HTML5引入了许多新元素和API,如`&lt;canvas&gt;`用于绘制图形,`&lt;video&gt;`和`&lt;audio&gt;`嵌入多媒体,`&lt;input type="date"&gt;`等新的输入...

    JavaScript一些技巧(转载)

    根据给定的文件信息,以下是对“JavaScript一些技巧”中涉及的关键知识点的详细解析: ### 1. 事件处理:`onBlur`, `onFocus`, `onChange`, `onSelect` 在网页开发中,事件处理是与用户交互的核心部分。`onBlur`...

Global site tag (gtag.js) - Google Analytics