您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记

2016-06-29 21:04 351 查看
JavaScript 是 Web 的编程语言。

输出文本

<script>
document.write(Date());
</script>


改变HTML元素

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>

调用内部函数

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 页面</h1>

<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>

<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="你好世界";
document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>

<p>当您点击上面的按钮时，两个元素会改变。</p>

</body>
</html>

调用外部脚本函数

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>

变量的使用

<!DOCTYPE html>
<html>
<body>
<script>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);
</script>
<p>The script above declares a variable,
assigns a value to it, displays the value, changes the value,
and displays the value again.</p>
</body>
</html>

随机函数

var r=Math.random();


Alert警告框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction()
{
alert("你好，我是一个警告框！");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="显示警告框" />

</body>
</html>



confirm确认框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>点击按钮，显示确认框。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;
var r=confirm("按下按钮!");
if (r==true)
{
x="你按下了\"确定\"按钮!";
}
else
{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

prompt提示框（带输入）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>点击按钮查看输入的对话框。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>

</body>
</html>


带参数的函数

<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>


带参数和返回值的函数

<!DOCTYPE html>
<html>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>

<p id="demo"></p>

<script>
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>


for循环

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i;
for (i=0;i<5;i++)
{
x=x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

for in遍历数组内元素

<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
{
txt=txt + person[x];
}

document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>


简单的计时

<!DOCTYPE html>
<html>
<head>
<script>
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout(function(){timedCount()},1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onclick="stopCount()" />
</form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.
</p>
</body>
</html>

字典

<!DOCTYPE html>
<html>
<body>

<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}

document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>


创建用于对象的模板

<!DOCTYPE html>
<html>
<body>

<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("John","Doe",50,"blue");

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

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 编程语言 web
相关文章推荐
新的分享
章节导航