这些实例都是根据原文http://www.runoob.com/js/js-tutorial.html 编辑的，仅用于经验交流
刚刚新建了一个分享交流群，366270001，期待你们的加入。
1，显示时间
主体
<p id="demo">这是一个显示时间案例</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>```
script
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
效果图
2，点击事件
主体
<button type="button" onclick="alert('欢迎!')">点我!</button>
效果图(在不同环境预览会有不一样的效果)
3，改变 HTML 内容
主体
<body>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
script
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
效果图
4，循环点击事件，小灯泡
主体 (图片自己加上去，注意路径)
<body>
<img id="myimage" onclick="changeImage()"
src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
script
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
效果图
5，简单识别表单认证
主体
<body>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">点击这里</button>
</body>
script
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
效果图
当时数字的时候是没有任何显示
当不是数字的时候，则会弹出框
网友评论