转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
菜鸟学习javascript实例教程         ★★★★

菜鸟学习javascript实例教程

作者:闵涛 文章来源:闵涛的学习笔记 点击数:3895 更新时间:2009/4/23 11:22:06
a string contains a specified word. If the word is found it returns the position of the first character of the word in the original string. Note: The first position in the string is 0!</p>

</body>
</html>

检测子字符串是否存在的例子:

<html>
<body>

<script type="text/javascript">
var str = "W3Schools is great!"
document.write(str.match("great"))
</script>

<p>This example tests if a string contains a specified word. If the word is found it returns the word.</p>

</body>
</html>


取子字符串的例子:

<html>
<body>

<script type="text/javascript">
var str="W3Schools is great!"
document.write(str.substr(2,6))
document.write("<br /><br />")
document.write(str.substring(2,6))
</script>

<p>
The substr() method returns a specified part of a string. If you specify (2,6) the returned string will be from the second character (start at 0) and 6 long.
</p>

<p>
The substring() method also returns a specified part of a string. If you specify (2,6) it returns all characters from the second character (start at 0) and up to, but not including, the sixth character.
</p>

</body>
</html>

转换字符串的大小写

<html>
<body>

<script type="text/javascript">
var str=("Hello JavaScripters!")
document.write(str.toLowerCase())
document.write("<br>")
document.write(str.toUpperCase())
</script>

</body>
</html>


数组对象的实例


数组简单应用的例子:


<html>
<body>

<script type="text/javascript">
var famname = new Array(6)
famname[0] = "Jan Egil"
famname[1] = "Tove"
famname[2] = "Hege"
famname[3] = "Stale"
famname[4] = "Kai Jim"
famname[5] = "Borge"

for (i=0; i<6; i++)
{
document.write(famname[i] + "<br>")
}
</script>

</body>
</html>


另一种使用数组的方法:

<html>
<body>

<script type="text/javascript">
var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge")

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

</body>
</html>


使用数组的一些属性和方法:

<html>
<body>

<script type="text/javascript">
var famname = new Array(3)
famname[0] = "Jani"
famname[1] = "Tove"
famname[2] = "Hege"

document.write(famname.length + "<br>")
document.write(famname.join(".") + "<br>")
document.write(famname.reverse() + "<br>")
document.write(famname.push("Ola","Jon") + "<br>")
document.write(famname.pop() + "<br>")
document.write(famname.shift() + "<br>")
</script>

</body>
</html>


数组的两个方法concat和slice

<html>
<body>

<script type="text/javascript">
var famname = new Array(3)
famname[0] = "Jani"
famname[1] = "Tove"
famname[2] = "Hege"

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

var famname3 = new Array("Stale","Borge")

document.write(famname.join() + "<br>")
document.write(famname.concat(famname2) + "<br>")
document.write(famname.concat(famname2,famname3) + "<br>")
document.write(famname.slice(1) + "<br>")
</script>

</body>
</html>

日期相关例子:


显示今天的日期:

<html>
<body>

<script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>

</body>
</html>


显示当前的时间:

<html>
<body>

<script type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>

</body>
</html>

设置日期:

<html>
<body>

<script type="text/javascript">
var d = new Date()
d.setFullYear("1990")
document.write(d)
</script>

</body>
</html>

UTC时间:

<html>
<body>

<script type="text/javascript">
var d = new Date()
document.write(d.getUTCHours())
document.write(".")
document.write(d.getUTCMinutes())
document.write(".")
document.write(d.getUTCSeconds())
</script>

</body>
</html>

显示当前的星期:

<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
document.write("Today is " + weekday[d.getDay()])
</script>
</body>
</html>

显示当前的日期和星期:

<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</body>
</html>

一个走动的时间:

<html>
<head>
<script type="text/javascript">
var timer = null

function stop()
{
clearTimeout(timer)
}

function start()
{
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display" size="20">
</form>
</body>
</html>

数学对象的例子:


<html>
<body>

<script type="text/javascript">
document.write(Math.round(7.25))
</script>

</body>
</html>


产生0-1之间的随机数的例子

<html>
<body>

<script type="text/javascript">
document.write(Math.random())
</script>

</body>
</html>

产生0-10的随机数的例子

<html>
<body>

<script type="text/javascript">
no=Math.random()*10
document.write(Math.round(no))
</script>

</body>
</html>


求最大数的例子:

<html>
<body>

<script type="text/javascript">
document.write(Math.max(2,4))
</script>

</body>
</html>

求最小数的例子:

<html>
<body>

<script type="text/javascript">
document.write(Math.min(2,4))
</script>

</body>
</html>

Convert Celsius to Fahrenheit


<html>
<head>
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
 {
 F=document.myform.celsius.value * 9 / 5 + 32
 document.myform.fahrenheit.value=Math.round(F)
 }
else 
 {
 C=(document.myform.fahrenheit.value -32) * 5 / 9
 document.myform.celsius.value=Math.round(C)
 }
}
</script>
</head>
<body>

<b>Insert a number in either input field, and the number will be converted into
either Celsius or Fahrenheit.</b>
<br />
<form name="myform">
<input name="celsius" onkeyup="convert('C')"> degrees Celsius<br />
equals<br />
<input name="fahrenheit" onkeyup="convert('F')"> degrees Fahrenheit
</form>
<br />
Note that the <b>Math.round</b> method is used,
so that the result will be returned as a whole number.

</body>
</html>


转变字符为数字的例子

<html>
<head>

<script type="text/javascript">
function toUnicode()
{
var str=document.myForm.myInput.value
if (str!="")
 {
 unicode=str.charCodeAt(0)
 }
document.myForm.unicode.value=unicode
}
</script>
</head>
<body>

<form name="myForm">
Write a character:<br />
<input size="1" name="myInput" maxlength="1" onkeyup="toUnicode()">
<hr />
The character's Unicode:<br />
<input size="3" name="unicode">
</form>

</html>


超级连接对象

用按钮来改变连接位置的例子:

<html>

<head>
<script type="text/javascript">
function myHref()
{
document.getElementById('myAnchor').innerText="Visit W3Schools"
document.getElementById('myAnchor').href="http://www.w3schools.com"
}
</script>
</head>

<body>
<a id="myAnchor" href="Visit'>http://www.microsoft.com">Visit Microsoft</a>
<form>
<input type="button" onclick="myHref()" value="Change URL and text">
</form>
</body>

</html>


改变连接的打开方式的例子:

<html>

<head>
<script type="text/javascript">
function myTarget()
{
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>

<body>
<a id="myAnchor" href="Visit'>

上一页  [1] [2] [3] [4] [5] [6] [7]  下一页


[网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(3)  [网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(2)
[网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(1)  [网页制作]Ultradev实例教程:4 插件的安装与使用
[网页制作]Ultradev实例教程:3.7 创建一个简单的查询  [网页制作]Ultradev实例教程:3.6 删除纪录
[网页制作]Ultradev实例教程:3.5 编辑数据库中的纪录  [网页制作]Ultradev实例教程:3.4 向数据库添加纪录
[网页制作]Ultradev实例教程:3.3 应用数据库创建动态网页  [网页制作]Ultradev实例教程:3.2 创建数据库连接
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台