码迷,mamicode.com
首页 > 编程语言 > 详细

2015/12/13 --高级javascript实例和部分javascript对象实例

时间:2015-12-13 21:44:27      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:

<html>

<head>

<script type = "text/javascript">

//替换字符串中的字符--replace()方法

var str = "Do you love me?";

document.write(str.replace (/me/who));

//查找字符串中指定的字符,若找到,返回该字符。---match()方法

var str = "hello kitty";

document.write(str.match("kitty") + "<br />");

document.write(str.match("kitty") + "<br />");

document.write(str.match("kitty1") + "<br />");

document.write(str.match("kitty!"));

//返回字符串中指定文本首次出现的位置---indexof()方法

var str = "hello world";

document.write(str.indexof("hello") + "<br>");

document.write(str.indexof("world") + "<br>");

document.write(str.indexof("world"));

//返回字符串长度

var txt = "welcome to my world!";

document.write(txt.length);

//为字符串添加样式

document.write("<p>Big:" + txt.big()+"</p>");

document.write("<p>Small:" + txt.Small() +"</p>");

document.write("<p>Bold:" + txt.bold() +"</p>");

document.write("<p>Italics:" + txt.italic() +"</p>");

document.write("<p>Blink:" + txt.blink() + "</p>");

document.write("<p>Fixed:" + txt.fixed() + "</p>");

document.write("<p>Strike:" + txt.strike() + "</p>");

dcument.write("<p>Fontcolor:" + txt.fontcolor("blue") + "</p>");

document.write("<p>Fontsiize:" + txt.fontsize(13) + "</p>");

document.write("<p>Uppercase:" + txt.uppercase() + "</p>");

document.write("<p>Lowercase:" + txt.lowercase() + "</p>");

document.write("<p>Suberscript:" + txt.sub() +"</p>");

doxument.write("<p>Superscript:" + txt.sup() + "</p>");

document.write("<p>Link:" + txt.link("http://www.baidu.com") + "</p>");

//创建用于对象的模版

function person(firstName,lastName,age,eyeColor){

this.firstName = firstName;

this.lastName = lastName;

this.age = age;

this.eyeColor = eyecolor;

}

mydear = new person("snoopy","peter",24,"black");

document.write(mydear.firsrName+ "的眼睛颜色是" + mydear.eyeColor);

//创建对象的实例

personObj = new Object();

personObj.firstName = "snoopy";

personObj.age = 35;

personObj.lastName = "abandon";

personObj.eyeColor = "blue";

document.write(personObj.firstName + "的年龄是" + personObj.age + "岁");

//使用计时事件制作的钟表

function startTime(){

var today = new Date();

var h = today.getHours();

var m = today.getMinutes();

var s = today.getSeconds();

m = checkTime(m);

s = checkTime(s);

document.getElementById("txt".innerHTML = h + ":" + m + ":" + s);

t = setTimeout("startTime()",500);

}

function checkTime(i){

if(i < 10){

i = "0" + i;

}

return i;

}

//带有停止按钮的无穷循环的计时事件

var c1 = 0;

var t1;

function timedCount(){

document.getElementById("txt").value = c1;

c1++;

t1 = setTimeout("timedCount()",1000);

}

function stopCount(){

c = 0;

setTimeout("document.getElementById("txt").value = 0",0);

clearTimeout(t);

}

//在一个无穷循环的计时事件

var c = 0;

var t;

function timedCount(){

document.getElementById("txt").value = c;

c++;

t = setTimeout("timedCount()",1000);

}

//另一个简单的计时

function timedText1(){

var t1 = setTimeout("document.getElementById ("txt").value = "two seconds"",2000);

var t2 = setTimeout("document.getElementById("txt").value = "four seconds"" ,4000);

var t3 = setTimeout("document.getElementById("txt").value = "six seconds"",6000);

}

//简单的计时

function timedMsg(){

var t = setTimeout(alert("5 secons!"),5000);

}

//添加了javascript的图像映射

function writeText(txt){

document.getElementById("desc").innerHTML = txt;

}

//按钮动画

function mouseOver(){

document.b1.src = "1.jpg"

}

function mouseOut.b1.src = "2.jpg";

</script>

</head>

<body onload = "startTime()">

//用计时事件制作的钟表

<div id = "txt"></div>

//带有停止按钮的无穷循环中的计时事件。

<form>

<input type = "button" value = "begain counts!" onclick = "timedCount()">

<input type = "button" value = "stop counting" onclick = "stopCount()">

<input type = "text" id = "txt">

</form>

<p>请点击上面的计时按钮,输入框会从0开始一直计数。点击停止按钮,计数将会从0重新开始。</p>

//一个无穷循环的计时事件

<form>

<input type = "button" value = "begain counts!" onclick = "setTimeout()">

<input type = "text" id = "txt">

</form>

<p>请点击上面的按钮,输入框会从0开始计算并且停止。</p>

//另一个简单的计时

<form>

<input type = "button" value = "show the time" onclick = "timedText()">

<input type = "txt" id = "txt">

</form>

<p>点击上面的按钮,输入框会显示逝去的时间。(2秒,4秒,6秒)</p>

//简单的计时

<form>

<input type = "button" value = "显示定时的警示框" onclick = "timedMsg()">

</form>

<p>请点击按钮,警示框会在5秒后显示。</p>

//添加了javascript的图像映射

<img src = "1.jpg" border = "0" alt = "planets" usemap = "planetmap">

<map name = "planetmap" id = "planetmap">

<area shape = "circle" coords = "180,139,14" onMouseOver =writeText("直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星,同时还由于两者拥有很多共同的特征。 href = "/index.html" target ="_blank" alt = "Venus" ")>

<area shape = "circle" coords = "130,139,20" onMouseOver = writeText("从地球上是很难研究水星的,这是由于它和太阳的距离总是很近。") href = "/index.html"

target ="_blank" alt = "Mercury">

<area shape = "circle" coords = "140,130,49" onMouseOver = writeText("太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。") href = "/index.html" target = "_blank" alt = "sun">

//按钮动画

<a href = "1/index.html" target = "_blank"></a>

<img boder ="0" alt = "Visit w3cschool" src = "2.jpg" onmouseover ="mouseOver() onmouseout ="mouseOut">

</body>

</html>

2015/12/13 --高级javascript实例和部分javascript对象实例

标签:

原文地址:http://www.cnblogs.com/whatcanido/p/5043572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!