整理的比较不错的JavaScript的方法和技巧

 更新时间:2007年02月27日 00:00:00   作者:  

51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br/>
3: Password: <input type=”password” name=”password”><br/>
4: <input type=”button” value=”Login” onClick=”this.form.submit();”>
5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html'; this.form.submit();”>
6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html'; this.form.submit();”>
7: </form> 


52 使用图像按钮

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br/>
3: Password: <input type=”password”name=”password”><br/>
4: <input type=”image” src="/”login.gif"” value=”Login”>
5: </form>
6: 


53 表单数据的加密

1: <SCRIPT LANGUAGE='JavaScript'>
2: <!--
3: function encrypt(item) { 
4: var newItem = '';
5: for (i=0; i < item.length; i++) { 
6: newItem += item.charCodeAt(i) + '.';
7: }
8: return newItem;
9: }
10: function encryptForm(myForm) { 
11: for (i=0; i < myForm.elements.length; i++) { 
12: myForm.elements[i].value = encrypt(myForm.elements[i].value);
13: }
14: }
15: 
16: //-->
17: </SCRIPT>
18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
19: Enter Some Text: <input type=text name=myField><input type=submit>
20: </form> 




JavaScript就这么回事5:窗口和框架 


54 改变浏览器状态栏文字提示

1: <script language=”JavaScript”>
2: window.status = “A new status message”;
3: </script> 


55 弹出确认提示框

1: <script language=”JavaScript”>
2: var userChoice = window.confirm(“Click OK or Cancel”);
3: if (userChoice) { 
4: document.write(“You chose OK”);
5: } else { 
6: document.write(“You chose Cancel”);
7: }
8: </script> 


56 提示输入

1: <script language=”JavaScript”>
2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
3: document.write(“Your Name is “ + userName);
4: </script> 


57 打开一个新窗口

1: //打开一个名称为myNewWindow的浏览器新窗口
2: <script language=”JavaScript”>
3: window.open(“http://www.liu21st.com/”,”myNewWindow”);
4: </script> 


58 设置新窗口的大小

1: <script language=”JavaScript”>
2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
3: </script> 


59 设置新窗口的位置

1: <script language=”JavaScript”>
2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3: </script> 


60 是否显示工具栏和滚动栏

1: <script language=”JavaScript”>
2: window.open(“http: 


61 是否可以缩放新窗口的大小

1: <script language=”JavaScript”>
2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 


62 加载一个新的文档到当前窗口

1: <a href='#' onClick='document.location = '125a.html';' >Open New Document</a> 


63 设置页面的滚动位置

1: <script language=”JavaScript”>
2: if (document.all) { //如果是IE浏览器则使用scrollTop属性
3: document.body.scrollTop = 200;
4: } else { //如果是NetScape浏览器则使用pageYOffset属性
5: window.pageYOffset = 200;
6: }</script> 


64 在IE中打开全屏窗口

1: <a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 


65 新窗口和父窗口的操作

1: <script language=”JavaScript”>
2: //定义新窗口
3: var newWindow = window.open(“128a.html”,”newWindow”);
4: newWindow.close(); //在父窗口中关闭打开的新窗口
5: </script>
6: 在新窗口中关闭父窗口
7: window.opener.close() 


66 往新窗口中写内容

1: <script language=”JavaScript”>
2: var newWindow = window.open(“”,”newWindow”);
3: newWindow.document.open();
4: newWindow.document.write(“This is a new window”);
5: newWIndow.document.close();
6: </script> 


67 加载页面到框架页面

1: <frameset cols=”50%,*”>
2: <frame name=”frame1” src="/”135a.html"”>
3: <frame name=”frame2” src="/”about:blank"”>
4: </frameset>
5: 在frame1中加载frame2中的页面
6: parent.frame2.document.location = “135b.html”; 


68 在框架页面之间共享脚本
如果在frame1中html文件中有个脚本

1: function doAlert() { 
2: window.alert(“Frame 1 is loaded”);
3: } 

那么在frame2中可以如此调用该方法

1: <body onLoad=”parent.frame1.doAlert();”>
2: This is frame 2.
3: </body> 


69 数据公用
可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用

1: <script language=”JavaScript”>
2: var persistentVariable = “This is a persistent value”;
3: </script>
4: <frameset cols=”50%,*”>
5: <frame name=”frame1” src="/”138a.html"”>
6: <frame name=”frame2” src="/”138b.html"”>
7: </frameset> 


这样在frame1和frame2中都可以使用变量persistentVariable 
70 框架代码库
根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1: <frameset cols=”0,50%,*”>
2: <frame name=”codeFrame” src="/”140code.html"”>
3: <frame name=”frame1” src="/”140a.html"”>
4: <frame name=”frame2” src="/”140b.html"”>
5: </frameset>

相关文章

  • javascript几个易错点记录

    javascript几个易错点记录

    本文记录了几个平时在项目中使用javascript的易错的点,时刻提醒自己不要再犯相同的错误。
    2014-11-11
  • JavaScript中利用各种循环进行遍历的方式总结

    JavaScript中利用各种循环进行遍历的方式总结

    这篇文章主要介绍了JavaScript中利用各种循环进行遍历的方式总结,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-11-11
  • ES6的Promise用法详解

    ES6的Promise用法详解

    本文详细讲解了ES6的Promise用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • javascript 秒表计时器实现代码

    javascript 秒表计时器实现代码

    这篇文章主要介绍了javascript 秒表计时器实现代码的相关资料,需要的朋友可以参考下
    2017-03-03
  • Javascript基础教程之变量

    Javascript基础教程之变量

    大家都知道javascript是可以隐式声名变量的。但要注意,隐式声名变量总是被创建为全局变量。看以下代码,情愿javascript语言强制声明变量。建议大家一定要var声明变量。
    2015-01-01
  • JS和函数式语言的三特性

    JS和函数式语言的三特性

    本文内容是我阅读《JavaScript语言精髓与编程实践》时,做的读书笔记,周爱民老师的书写的太深刻了
    2014-03-03
  • 浅谈JavaScript_DOM学习篇_图片切换小案例

    浅谈JavaScript_DOM学习篇_图片切换小案例

    这篇文章主要介绍了JavaScriptDOM图片切换小案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 菜鸟javascript基础整理1

    菜鸟javascript基础整理1

    JavaScript 基础基础,虽然基础但是很实用。
    2010-12-12
  • css配合JavaScript实现tab标签切换效果

    css配合JavaScript实现tab标签切换效果

    本篇文章我们给大家分享一个关于CSS配合JS实现的TAB标签切换效果,需要的朋友们可以测试下。
    2018-10-10
  • javascript的BOM

    javascript的BOM

    BOM是浏览器的窗口对象,提供了很多窗口处理的API。在webapp框架越来越多的情况下,需要我们在同一窗口处理不同页面、不同的ajax数据,则需要我们熟悉BOM的内容。
    2016-05-05

最新评论