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

JS学习2. 简单的实例代码

2013-11-30 16:42 381 查看

根据W3School上的js教程，做的一些例子。

html：

<!DOCTYPE html>
<html>

<body>

<script Language="JavaScript" src="first.js">
</script>

<!--添加一个button按钮，当点击时弹出alert()函数-->
<button type="button" onclick="alert('Welcome!')">Click here</button>

<!--通过定义方法改变html内容-->
<p id="demo">this is html DOM</p>
<button type="button" onclick="myFunction()">Will change</button>

<!--改变html图像-->
<img id="myimage" onclick="changeImage()" src="res/eg_bulboff.gif">

<!--改变html样式-->
<p id="demo2"><span style="#000000">js 能改变 html 元素样式</span></p>
<button type="button" onclick="changeStyle()">Change e's style</button>

<!--输入验证-->
<input id="input" type="text">
<button type="button" onclick="checkInput()">Check this</button>

</body>

</html>

js：

function myFunction(){
<!--document.getElementById("id")。这个方法是HTML DOM中定义的-->

x = document.getElementById("demo");
x.innerHTML="Hi, had been changed^^ use myFunction() method";
}

/**
*   改变html图像的方法
* 使用getElementById获取图像id
* 然后使用element.src.match("res name") 来与当前图像匹配是否相同
* 例子的意思是加入现在灯是亮的状态时，换成关灯的图像；当不是亮的状态
* 时，换成亮灯的图片资源
*/
function changeImage(){

element = document.getElementById("myimage");

if(element.src.match("bulbon"))
{
element.src="/res/eg_bulboff.gif";
}
else
{
element.src="/res/eg_bulbon.gif";
}
}

/**
* 改变html元素样式
*/
function changeStyle(){
x = document.getElementById("demo2");

x.style.color = "#ff0000";
}

/**
*   输入验证
* isNaN(var x) 是检测非特殊数字的方法，
* 加入x为纯粹数字的话，返回false，反之则是true
*/
function checkInput(){
var x = document.getElementById("input").value;
if(x=="" || isNaN(x))
{
alert(isNaN(x));
}
}

document.write("<h1>this is a heading</h1>");
document.write("<p>this is a paragraph</p>");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航