JavaScript实例2

用户头像
广州/网页设计师/11年前/252浏览
JavaScript实例2
用户头像
Licey_U

JavaScript实例2

<!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>Javas cript HTML DOM</title>
</head>
<body>

<h1 style="color:#00F">Javas cript HTML DOM</h1>
<h2 style="color:#F30">Javas cript HTML DOM</h2>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>通过标签名查找 HTML 元素.....本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<s cript>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是==js结果:' + y[0].innerHTML);
</s cript>

<br /><br />

<s cript>
document.write(Date());
</s cript>

<br /><br />

<p id="p1">Hello World!</p>
<s cript>
document.getElementById("p1").innerHTML="New text!";
</s cript>
<p>上面的段落被一条 Javas cript 脚本修改了。</p>

<br /><br />

<h1 id="header">Old Header</h1>
<s cript>
var element=document.getElementById("header");
element.innerHTML="New Header";
</s cript>
<p>"Old Header" 已被修改为 "New Header"。</p>

<img id="image" src="/i/eg_tulip.jpg" />
<s cript>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</s cript>
<p>原始图片是郁金香(eg_tulip.jpg),但是已被修改为卢浦大桥(shanghai_lupu_bridge.jpg)。</p>

<br /><br />

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<s cript>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</s cript>
<p>上面的段落已被一段脚本修改。</p>

<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">点击这里!</button>

<p id="ap1">这是一段文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('ap1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('ap1').style.visibility='visible'" />

<s cript>
function changetext(id)
{id.innerHTML="谢谢!";}
</s cript>
<h1 onclick="changetext(this)" style="background:#FC3">请点击该文本</h1>

<h1 onclick="this.innerHTML='谢谢!'" style="background:#3C6">请点击该文本</h1>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button onclick="displayDate()">点击这里</button>
<s cript>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</s cript>
<p id="demo"></p>

<h3>onload 和 onunload 事件<br />放在{body onload="checkCookies()"}</h3>
<s cript>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}
</s cript>
<p>提示框会告诉你,浏览器是否已启用 cookie。</p>

<br /><br />

<s cript>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</s cript>
请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

<br /><br />

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<s cript>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</s cript>

<br /><br />

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<s cript>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</s cript>

<br /><br />

<div id="dav1">
<p id="pa1">这是一个段落。</p>
<p id="pa2">这是另一个段落。</p>
</div>
<s cript>
var para=document.createElement("p");//创建元素P
var node=document.createTextNode("这是新段落。");//创建P里面的文本
para.appendChild(node);//增加

var element=document.getElementById("dav1");
element.appendChild(para);
</s cript>

<br />

<div id="divb1">
<p id="pb1">这是一个段落。</p>
<p id="pb2">这是另一个段落。</p>
</div>
<s cript>
var parent=document.getElementById("divb1");
var child=document.getElementById("pb1");
parent.removeChild(child);
</s cript>

<br /><br />

<h2 style="color:#F30">Javas cript 对象</h2>

<h3>同个效果几个js写法</h3>
<code style="color:#636">person={firstname:"Bill",lastname:"gates",age:56,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");<br /></code>
<s cript>
person={firstname:"Bill",lastname:"gates",age:56,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</s cript>
<br />
<code>person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");<br /></code>
<s cript>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</s cript>
<br />
<code>function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");<br /></code>
<s cript>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</s cript>

<br /> <br />
<s cript>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
 
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("Ballmer");
document.write(myMother.lastname);
</s cript>


<br />
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction1()">点击这里</button>
<p id="demo1"></p>

<s cript>
function myFunction1()
{
var x1;
var txt1="";
var person1={fname:"Bill",lname:"Gates",age:56};

for (x1 in person1)
{
txt1=txt1 + person1[x1];
}

document.getElementById("demo1").innerHTML=txt1;
}
</s cript>

<br />

<s cript>
var x;
document.write("<p>只有 17 位: ");
x=12345678901234567890;
document.write(x + "</p>");

document.write("<p>0.2 + 0.1 = ");
x=0.2+0.1;
document.write(x + "</p>");

document.write("<p>可分别乘以 10 并除以 10 : ");
x=(0.2*10+0.1*10)/10;
document.write(x +"</p>");

</s cript>

<h3>计算字符串的长度</h3>
<s cript type="text/javas cript">
var txt="Hello World!"
document.write(txt.length)
</s cript>

<h3>为字符串添加样式</h3>
<s cript type="text/javas cript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
document.write("<p>Subs cript: " + txt.sub() + "</p>")
document.write("<p>Supers cript: " + txt.sup() + "</p>")
document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</s cript>

<h3>如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。</h3>
<s cript type="text/javas cript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</s cript>

<h3>如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。</h3>
<s cript type="text/javas cript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</s cript>

<h3>如何使用 replace() 方法在字符串中用某些字符替换另一些字符。</h3>
<s cript type="text/javas cript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))
</s cript>

<h3>返回当日的日期和时间 Date() </h3>
<s cript type="text/javas cript">
document.write(Date())
</s cript>

<h3>getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。</h3>
<s cript type="text/javas cript">
var d=new Date();
document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");
</s cript>

<h3>setFullYear() 设置具体的日期</h3>
<s cript type="text/javas cript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</s cript>

<h3>toUTCString() 将当日的日期(根据 UTC)转换为字符串。</h3>
<s cript type="text/javas cript">
var d = new Date()
document.write (d.toUTCString())
</s cript>

<h3>getDay() 和数组来显示星期,而不仅仅是数字。</h3>
<s cript type="text/javas cript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])
</s cript>

<h3>如何在网页上显示一个钟表。</h3>
<s cript type="text/javas cript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt2').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10)
  {i="0" + i}
  return i
}
</s cript>
<div id="txt2"></div>
<input type="submit" onclick="startTime()" value="钟表"/>


<h1>Javas cript Array(数组)对象Array.....Array.....Array.....Array.....Array.....Array.....Array.....</h1>
<h3>创建数组,为其赋值,然后输出这些值。</h3>
<s cript type="text/javas cript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
</s cript>

<h3>使用 for...in 声明来循环输出数组中的元素</h3>
<s cript type="text/javas cript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</s cript>

<h3>concat() 方法来合并两个数组</h3>
<s cript type="text/javas cript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</s cript>

<h3>join() 方法将数组的所有元素组成一个字符串</h3>
<s cript type="text/javas cript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
</s cript>

<h3>sort() 方法从字面上对数组进行排序</h3>
<s cript type="text/javas cript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</s cript>

<h3> sort() 方法从数值上对数组进行排序</h3>
<s cript type="text/javas cript">
function sortNumber(a, b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</s cript>

<h1 style="background:#FF9">Javas cript Boolean(逻辑)对象(不太懂)</h1>
<h2><strong>注释</strong>:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!</h2>
<h3>检查逻辑对象是 true 还是 false。</h3>
<s cript type="text/javas cript">
var b1=new Boolean( 0)
var b2=new Boolean(1)
var b3=new Boolean("")
var b4=new Boolean(null)
var b5=new Boolean(NaN)
var b6=new Boolean("false")

document.write("0 是逻辑的 "+ b1 +"<br />")
document.write("1 是逻辑的 "+ b2 +"<br />")
document.write("空字符串是逻辑的 "+ b3 + "<br />")
document.write("null 是逻辑的 "+ b4+ "<br />")
document.write("NaN 是逻辑的 "+ b5 +"<br />")
document.write("字符串 'false' 是逻辑的 "+ b6 +"<br />")
</s cript>

<h3>下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。</h3>
<s cript type="text/javas cript">
var myBoolean=new Boolean();
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean(0);
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean(null);
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean("");
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean(false);
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean(NaN);
document.write(myBoolean);
document.write("<br />");
</s cript>

<h3>下面的所有的代码行均会创初始值为 true 的 Boolean 对象:</h3>
<s cript type="text/javas cript">
var myBoolean=new Boolean(1);
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean(true);
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean("true");
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean("false");
document.write(myBoolean);
document.write("<br />");

var myBoolean=new Boolean("Bill Gates");
document.write(myBoolean);
document.write("<br />");
</s cript>


<h3>round()四舍五入</h3>
<s cript type="text/javas cript">
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(0.50) + "<br />")
document.write(Math.round(0.49) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))
</s cript>

<h3>random() 来返回 0 到 1 之间的随机数</h3>
<s cript type="text/javas cript">
document.write(Math.random())
</s cript>

<h3>max() 来返回两个给定的数中的较大的数</h3>
<s cript type="text/javas cript">
document.write(Math.max(5,7) + "<br />")
document.write(Math.max(-3,5) + "<br />")
document.write(Math.max(-3,-5) + "<br />")
document.write(Math.max(7.25,7.30))
</s cript>

<h3> min() 来返回两个给定的数中的较小的数</h3>
<s cript type="text/javas cript">
document.write(Math.min(5,7) + "<br />")
document.write(Math.min(-3,5) + "<br />")
document.write(Math.min(-3,-5) + "<br />")
document.write(Math.min(7.25,7.30))
</s cript>

<h1>JS 正则表达式</h1>
<h3>RegExp 对象有 3 个方法:test()、exec() 以及 compile()。<br />
test() 方法检索字符串中的指定值。返回值是 true 或 false。</h3>
<s cript type="text/javas cript">
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
</s cript>

<h3>exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。</h3>
<s cript type="text/javas cript">
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
</s cript>

<h3>您可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。<br />
在使用 "g" 参数时,exec() 的工作原理如下:<br />
    找到第一个 "e",并存储其位置<br />
    如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置<br />
</h3>
<s cript type="text/javas cript">
var patt1=new RegExp("e","g");

do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
</s cript>

<h3>compile() 方法用于改变 RegExp。compile() 既可以改变检索模式,也可以添加或删除第二个参数。</h3>
<s cript type="text/javas cript">
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
</s cript>

<h1>Javas cript Window - 浏览器对象模型</h1>
<h3>Window 尺寸</h3>
<p>有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。</p>
<p>对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:</p>
<ul>
<li>window.innerHeight - 浏览器窗口的内部高度</li>
<li>window.innerWidth - 浏览器窗口的内部宽度</li>
</ul>
<p>对于 Internet Explorer 8、7、6、5:</p>
<ul>
<li>document.documentElement.clientHeight</li>
<li>document.documentElement.clientWidth</li>
</ul>
<p>或者</p>
<ul>
<li>document.body.clientHeight</li>
<li>document.body.clientWidth</li>
</ul>
<p id="demo4"></p>
<s cript>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;//||为or,逻辑运算中的或

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

x=document.getElementById("demo4");
x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"
</s cript>

<h2>其他 Window 方法</h2>
<p>一些其他方法:</p>
<ul>
<li>window.open() - 打开新窗口</li>
<li>window.close() - 关闭当前窗口</li>
<li>window.moveTo() - 移动当前窗口</li>
<li>window.resizeTo() - 调整当前窗口的尺寸</li>
</ul>

<h1 style="color:#0F0">Javas cript Window Screen用户屏幕</h1>
<ul>
<li>screen.availWidth - 可用的屏幕宽度</li>
<li>screen.availHeight - 可用的屏幕高度</li>
</ul>
<h3>返回您的屏幕的可用宽度:</h3>
<s cript>
document.write("可用宽度:" + screen.availWidth);
</s cript>
<h3>返回您的屏幕的可用高度:</h3>
<s cript>
document.write("可用高度:" + screen.availHeight);
</s cript>

<h3>window.<strong style="background:#3FF; font-size:20px">location</strong> 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。</h3>
<ul>
<li>location.hostname 返回 web 主机的域名</li>
<li>location.pathname 返回当前页面的路径和文件名</li>
<li>location.port 返回 web 主机的端口 (80 或 443)</li>
<li>location.protocol 返回所使用的 web 协议(http:// 或 https://)</li>
</ul>

<h3>返回(当前页面的)整个 URL:</h3>
<s cript>
document.write(location.href);
</s cript>

<h3>返回当前 URL 的路径名:</h3>
<s cript>
document.write(location.pathname);
</s cript>

<h3>加载一个新的文档:</h3>
<s cript>
function newDoc()
 {
 window.location.assign("http://www.w3school.com.cn")
 }
</s cript>
<input type="button" value="加载新文档" onclick="newDoc()">


<h3>Javas cript Window <strong style="background:#3FF; font-size:20px">History</strong></h3>
<ul>
<li>history.back() - 与在浏览器点击后退按钮相同</li>
<li>history.forward() - 与在浏览器中点击按钮向前相同</li>
</ul>
<s cript>
function goBack()
  {
  window.history.back()
  }
</s cript>
<input type="button" value="Back转到上一页" onclick="goBack()">

<s cript>
function goForward()
  {
  window.history.forward()
  }
</s cript>
<input type="button" value="Forward转到下一页" onclick="goForward()">

<h3>navigator 对象包含有关访问者浏览器的信息</h3>
<div id="example"></div>
<s cript>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</s cript>

<h3>Javas cript 消息框</h3>
<h3>可以在 Javas cript 中创建三种消息框:警告框、确认框、提示框。</h3>
<ul>
<li>警告框alert("文本")</li>
<li>确认框confirm("文本")</li>
<li>提示框prompt("文本","默认值")</li>
</ul>
<s cript type="text/javas cript">
function disp_alert()
{
alert("我是警告框!!")
}
</s cript>
<input type="button" onclick="disp_alert()" value="显示警告框" />

<h3></h3>
<s cript type="text/javas cript">
function disp_alert()
{
alert("再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行。")
}
</s cript>
<input type="button" onclick="disp_alert()" value="显示警告框 带有折行的警告框" />

<h3>确认框,有确认结果的</h3>
<s cript type="text/javas cript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</s cript>
<input type="button" onclick="show_confirm()" value="Show a confirm box确认框" />

<h3></h3>
<s cript type="text/javas cript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
    document.write("你好!" + name + " 今天过得怎么样?")
    }
  }
</s cript>
<input type="button" onclick="disp_prompt()" value="显示提示框" />

<h1>Javas cript <strong style="color:#fff; font-size:30px; font-weight:bold; background:#F00; padding:5px;">计时</strong>(设定的时间间隔之后来执行代码)</h1>

<s cript type="text/javas cript">
function timedMsg()
{
var t=setTimeout("alert('5 秒!')",5000)
}
</s cript>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>

<s cript type="text/javas cript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</s cript>
<form>
<input type="button" value="显示计时的文本" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间(2、4、6 秒)。</p>

<s cript type="text/javas cript">
var c=0
var t
function timedCount()
{
document.getElementById('txta').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</s cript>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txta">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>

<s cript type="text/javas cript">
var cbb=0
var tbb
function timedCountbb()
{
document.getElementById('txtbb').value=cbb
cbb=cbb+1
tbb=setTimeout("timedCountbb()",1000)
}

function stopCountbb()
{
cbb=0;
setTimeout("document.getElementById('txtbb').value=0",0);
clearTimeout(tbb);
}
</s cript>
<form>
<input type="button" value="开始计时!" onClick="timedCountbb()">
<input type="text" id="txtbb">
<input type="button" value="停止计时!" onClick="stopCountbb()">
</form>
<p>请点击上面的"开始计时"按钮来启动计时器。输入框会一直进行计时,从 0 开始。点击"停止计时"按钮可以终止计时,并将计数重置为 0。</p>

<h3></h3>
<s cript type="text/javas cript">
function startTimecc()
{
var todayc=new Date()
var hc=todayc.getHours()
var mc=todayc.getMinutes()
var sc=todayc.getSeconds()
// add a zero in front of numbers<10
mc=checkTime(mc)
sc=checkTime(sc)
document.getElementById('txtcc').innerHTML=hc+":"+mc+":"+sc
tc=setTimeout('startTimecc()',500)
}

function checkTime(i)
{
if (i<10)
  {i="0" + i}
  return i
}
</s cript>
<input type="submit" value="一个 Javas cript 小时钟"  onclick="startTimecc()"/>
<div id="txtcc"></div>

<p>在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:</p>
<dl>
<dt>setTimeout()  语法:var t=setTimeout("javas cript语句",毫秒)</dt>
<dd>未来的某时执行代码,1000 毫秒等于一秒。</dd>
<dt>clearTimeout()  语法:clearTimeout(setTimeout_variable)</dt>
<dd>取消setTimeout()</dd>
</dl>

<h3>Javas cript Cookies.....<strong style="color:#fff; font-size:30px; font-weight:bold; background:#F00; padding:5px;">cookie</strong> 用来识别用户。</h3>
<s cript type="text/javas cript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</s cript>
<input type="submit" value="登录"  onclick="checkCookie()"/>

<h3> If 语句</h3>

<s cript type="text/javas cript">
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("<b>早安</b>")
}
</s cript>
<p>本例演示 If 语句。</p>
<p>如果浏览器时间小于 10,那么会向您问"早安"。</p>

<s cript type="text/javas cript">
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("<b>早安</b>")
}
else
{
document.write("<b>祝您愉快</b>")
}
</s cript>
<p>本例演示 If...Else 语句。</p>
<p>如果浏览器时间小于 10,那么会向您问"早安",否则会向您问候"祝您愉快"。</p>

<s cript type="text/javas cript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</s cript>
<p>本例演示 if..else if...else 语句。</p>

<h3>random()随机数,可以当刷新验证码用 随机链接</h3>
<s cript type="text/javas cript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.w3school.com.cn'>学习 Web 开发!</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>访问微软!</a>")
}
</s cript>

<h1>Javas cript 函数</h1>

<s cript type="text/javas cript">
function myfunction()
{
alert("您好!")
}
</s cript>
<form>
<input type="button" onclick="myfunction()" value="调用函数">
</form>
<p>通过点击这个按钮,可以调用一个函数。该函数会提示一条消息。<code>alert("您好!")</code></p>

<s cript type="text/javas cript">
function myfunctiondd(txtdd)
{
alert(txtdd)
}
</s cript>
<form>
<input type="button" onclick="myfunctiondd('您好您好您好!')" value="调用函数">
</form>
<p>通过点击这个按钮,可以调用一个带参数的函数。该函数会输出这个参数。<code>onclick="myfunctiondd('您好您好您好!')"</code></p>

<s cript type="text/javas cript">
function myfunctionee(txtee)
{
alert(txtee)
}
</s cript>
<form>
<input type="button" onclick="myfunctionee('早安!')" value="在早晨">
<input type="button" onclick="myfunctionee('晚安!')" value="在夜晚">
</form>
<p>带有参数的函数 2个函数   2个函数   2个函数                    通过点击这个按钮,可以调用一个函数。该函数会输出传递给它的参数。</p>

<s cript type="text/javas cript">
function myFunction()
{
return ("您好,祝您愉快!")
}

document.write(myFunction())
</s cript>
<p>该函数返回一段文本。</p>

<s cript type="text/javas cript">
function product(a,b)
{
return a*b
}

document.write(product(6,5))
</s cript>
<p>脚本调用一个带有两个参数(6 和 5)的函数。</p>
<p>该函数会返回这两个参数的乘积。</p>

<s cript type="text/javas cript">
for (i = 0; i <= 5; i++)
{
document.write("数字是 " + i)
document.write("<br />")
}
</s cript>
<h1>For 循环         ...........解释:</h1>
<p>for 循环的步进值从 i=0 开始。</p>
<p>只要 <b>i</b> 小于等于 5,循环就会继续运行。</p>
<p>循环每循环一次,<b>i</b> 就会累加 1。</p>

<h1 style="color:#F00">循环产生 HTML 标题</h1>
<s cript type="text/javas cript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
</s cript>

<s cript type="text/javas cript">
i = 0
while (i <= 5)
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
</s cript>
<h1>While 循环..................解释:</h1>
<p><b>i</b> 等于 0。</p>
<p>当 <b>i</b> 小于或等于 5 时,循环将继续运行。</p>
<p>循环每运行一次,<b>i</b> 会累加 1。</p>

<s cript type="text/javas cript">
i = 0
do
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
while (i <= 5)
</s cript>
<h1>Do while 循环.........解释:</h1>
<p><b>i</b>  等于 0。</p>
<p>循环首先会运行。</p>
<p>每循环一次,<b>i</b> 就会累加 1。</p>
<p>当 <b>i</b> 小于或等于 5 时,循环会继续运行。</p>
<p style="background:#FF6; font-size:16px">
注释:死循环常用while <br />
条件判断的话 可以用for循环 也可以用while循环<br />
do{}while;循环是先执行一次,有时候代码要求必须执行至少一次 才可以<br /></p>

<h3>break 语句</h3>
<s cript type="text/javas cript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("数字是 " + i)
document.write("<br />")
}
</s cript>
<p>解释:循环会在 i=3 时中断。</p>

<h3>continue 语句</h3>
<s cript type="text/javas cript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</s cript>
<p>解释:当 i=3 时,会中断循环,并从下一个值开始继续循环。</p>

<h3>使用 For...In 声明来遍历数组内的元素</h3>
<s cript type="text/javas cript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</s cript>

<h1 style="background:#6FF">Javas cript 错误处理</h1>
<h3>try...catch 语句</h3>
<s cript type="text/javas cript">
var txt=""
function message()
{
try
   {
   adddlert("Welcome guest!")
   }
catch(err)
   {
   txt="本页中存在错误。\n\n"
   txt+="错误描述:" + err.des cription + "\n\n"
   txt+="点击'确定'继续。\n\n"
   alert(txt)
   }
}
</s cript>
<input type="button" value="查看消息try" onclick="message()" />

<h3>带有确认框的 try...catch 语句</h3>
<s cript type="text/javas cript">
var txt=""
function message()
{
try
   {
   adddlert("Welcome guest!")
   }
catch(err)
   {
     txt="本页中存在错误。\n\n"
     txt+='点击"确定"继续查看本页,\n'
     txt+='点击"取消"返回首页。\n\n'
     if(!confirm(txt))
         {
         document.location.href="/index.html"
         }
   }
}
</s cript>
<input type="button" value="查看消息带有确认框的 try" onclick="message()" />

<h3>throw 声明</h3>
<s cript type="text/javas cript">
function messagetry()
{
var x=prompt("请输入 0 至 10 之间的数:","")
try
{
if(x>10)
  throw "Err1"
else if(x<0)
  throw "Err2"
else if(isNaN(x))
  throw "Err3"
}
catch(er)
{
if(er=="Err1")
  alert("错误!该值太大!")
if(er == "Err2")
  alert("错误!该值太小!")
if(er == "Err3")
  alert("错误!该值不是数字!")
}
}
</s cript>
<input type="button" value="throw 声明" onclick="messagetry()" />

<h3></h3>
<s cript type="text/javas cript">
onerror=handleErr
var 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!")
}
</s cript>
<input type="button" value="onerror 事件" onclick="message()" />

<h1 style="background:#6FF">高级 Javas cript 实例</h1>
<h3>检测浏览器及版本</h3>
<s cript type="text/javas cript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称:"+ browser)
document.write("<br />")
document.write("浏览器版本:"+ version)
</s cript>

<h3></h3>
<s cript type="text/javas cript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=5))
  {alert("您的浏览器够先进了!")}
else
  {alert("是时候升级您的浏览器了!")}
}
</s cript>
<input type="button" value="根据浏览器类型提醒用户" onclick="detectBrowser()" />

<h3>按钮动画.......图像切换</h3>
<s cript type="text/javas cript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</s cript>
<a href="/index.html" target="_blank"><img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"  onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

<h3>添加了 Javas cript 的图像映射</h3>
<s cript type="text/javas cript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</s cript>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" width="200px" height="300" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星,同时还由于两者拥有很多共同的特征。')" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是很难研究水星的,这是由于它和太阳的距离总是很近。')" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')" href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>

<h3>创建对象的实例</h3>
<s cript type="text/javas cript">
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Adams"
personObj.age=35
personObj.eyecolor="black"
document.write(personObj.firstname + " 的年龄是 " + personObj.age + " 岁。")
</s cript>

<h3>创建用于对象的模板</h3>
<s cript type="text/javas cript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
myFather=new person("John","Adams",35,"black")
document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")
</s cript>

<h3>constructor 属性返回对创建此对象的数组函数的引用</h3>
<s cript type="text/javas cript">

var test=new Array();

if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}

</s cript>

<h3></h3>
<s cript type="text/javas cript">
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor);
</s cript>

<h3> length 属性返回并设置数组的长度</h3>
<s cript type="text/javas cript">

var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"

document.write("Original length: " + arr.length)
document.write("<br />")

arr.length=5
document.write("New length: " + arr.length)

</s cript>

<h3>prototype 属性来向对象添加属性</h3>
<s cript type="text/javas cript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;
bill.salary=20000;

document.write(bill.salary);

</s cript>

<h3>如何使用 concat() 连接数组中的值</h3>
<s cript type="text/javas cript">
var a = [1,2,3];
document.write(a.concat(4,5));
</s cript>

<h3>如何使用 concat() 连接两个数组</h3>
<s cript type="text/javas cript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))

</s cript>

<h3>如何使用 concat() 连接三个数组</h3>
<s cript type="text/javas cript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3))

</s cript>

<h3>join() 方法用于把数组中的所有元素放入一个字符串.......语法:arrayObject.join(separator)</h3>
<s cript type="text/javas cript">

var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join());

document.write("<br />");

document.write(arr.join("."));

</s cript>
</body>
</html>

0
举报
|
1
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
浏览电脑网页的元素
卡通女孩与网页表格3D渲染
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
商务网页
卡通女孩与网页表格3D渲染
四个人物分别在上网贴纸合集
户外旅行飞机情侣假日出行
网页背景
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
网页图标
卡通风格网页页面3D渲染
男生和女生站在网页面前矢量扁平插画
网页页面矢量插画
四个人物分别在上网贴纸合集
卡通女孩与网页表格3D渲染
三个青年正在装修网页矢量插画
商务网页
网页图标
卡通风格网页页面3D渲染
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
网页电商背景矢量插画
三位美女围着网页看信息矢量插画
3D风格时尚电子商务设计元素
卡通风格网页页面3D渲染
你可能喜欢
大家都在看
登录注册