js实例

来源：互联网发布：mac上的音频处理软件编辑：程序博客网时间：2024/06/16 20:07

本文将js中的注释、if-else 、for等的使用做了简单的整理，还有对生成标签、提示框、以及异常的处理，以及带参函数的使用方法。这些例子虽然简单，但是足以说明问题。如有疑问或有错误地方，还望大神门指正。

1、js中注释的使用

<html><body><script type="text/javascript">/*这是多行注释/*  注释内容*/document.write("<h1>这是标题</h1>");document.write("<p>这是段落。</p>");

<pre name="code" class="html">*/

document.write("<p>这是另一个段落。</p>");//这是单行注释</script></body></html>

2、利用if-else产生随机链接

<!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>随机链接</title></head><body><script type="text/javascript">var x=Math.random();document.write(x);if(x>0.5){document.write("<a href='http://www.baidu.com'>百度</a>");}else{document.write("<a href='http://www.sina.com'>新浪</a>");}</script></body></html>

3、生成标签

<!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>生成标签</title><script>alert("这是head部分生成的提示信息！");</script></head><body><script>document.write("<h1>hello world </h1>");</script></body></html>

4、生成多行警示框

<!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>警告框的生成</title><script>function myFunction(){alert("尊敬的客户，你好"+"\n"+"感谢你查看我的博客，欢迎关注我。谢谢！");}</script></head><body><input type="button" onclick="myFunction()" value="显示警告框"/></body></html>

5、生成警告框，并对生成的警告框如何处理提出确定。

<!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>确定框</title><script type="text/javascript">function myFunction(){var r=confirm("请点击确定或取消");//生成一个提示框if(r==true)//对生成的提示框如何处理做出判断alert("你点击的是确定按钮");elsealert("你点击的是取消按钮");}</script></head><body><input type="button" onclick="myFunction()" value="显示提示框"/></body></html>

6、提示框

<!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>提示框</title><script>function myFunction(){var name=prompt("请输入你的名字","张三");if(name!=null&&name!=""){document.write("你好"+name+",很高兴你看我的博客!");}}</script></head><body><input type="button" onclick="myFunction()" value="点击按钮" /></body></html>

7、html向js中传递参数

<!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>调用带有参数的函数</title><script>function myFunction(txt){alert(txt);}</script></head><body>    <input type="button" onclick="myFunction('早上好！')" value="现在是早上" >    <input type="button" onclick="myFunction('晚上好！')" value="现在是晚上" >     <p>通过点击这个按钮，可以调用一个函数。该函数会输出传递给它的参数。</p> </body></html>

8、带有参数并返回值的函数

<!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>带有参数并返回值的函数</title><script>function myFunction(a,b){return a*b;}</script></head><body><script>function myFunction2(x,y){document.write(myFunction(x,y));}</script><span style="white-space:pre"></span><button onclick="myFunction2(5,6)">输出5*6的结果</button></body></html>

9、js中for循环的用法

<!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>js中的for循环</title><script>{var i;for(i=1;i<6;i++){document.write("<h"+i+">这是标题"+i+"</h"+i+">"+"<br>");}}</script></head><body></body></html>

10、js中类似于for-each循环的for循环遍历

<!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>类似于foreach遍历</title><script>var x;var mycars = new Array();mycars[0]="宝马";mycars[1]="奔驰";mycars[2]="宾利";for(x in mycars){document.write(mycars[x]+"<br/>");}</script></head><body></body></html>

11、带有确认框的 try...catch 语句。此方法用于网页出现错误时使用。

<!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>带有确认框的 try...catch 语句</title><script>var txt="";try{adddlert("welcome guest!")}catch(err){txt="本页中存在错误！\n\n"txt+="点击“确定”继续查看本页\n"txt+="点击“取消“进入我的博客\n\n";if(!confirm(txt)){//document.location.href="/index.html";//跳转到本地html页面window.location.href='http://blog.csdn.net/guyan1111';//跳转到网络页面}}</script></head><body></body></html>

12、js中的throw用法

<!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>throw声明</title><script>myFunction();function myFunction(){var x=prompt("请输入0-10之间的数字","");try{if(x>10)throw "err1";else if(x<0)throw "err2";else if(isNaN(x))throw "err3";else if(x=="")throw "err4";elsedocument.write(x);}catch(err){if(err=="err1")alert("错误，该值太大");else if(err=="err2")alert("错误，该值太小");else if(err=="err3")alert("错误，该值不是数字");else if(err=="err4")myFunction();else alert("未知错误！");}}</script></head><body></body></html>

13、onerror事件，将网页中的错误用onerror捕获，传到handleErr函数中

<!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>无标题文档</title><script type="text/javascript">onerror=handleErrvar txt=""function handleErr(msg,url,l){txt="本页中存在错误。\n\n"txt+="错误：" + msg + "\n"txt+="URL: " + url + "\n"txt+="行：" + l + "\n\n"txt+="点击“确定”继续。\n\n"alert(txt)return true}function message(){adddlert("Welcome guest!")}</script></head><body><input type="button" value="查看消息" onclick="message()" /></body></html></head><body></body></html>

0 0