关闭

js的一些基础

标签: js基础用法
370人阅读 评论(0) 收藏 举报
js的编程用法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script>
document.write("<h1>这个是write,写入</h1>");
document.write('<p>这是内容</p>');
</script>
<br />
························································································
<button type="button" onclick="alert('JavaScript 能够对事件作出反应。(alert事件)')">猛戳</button>
<br />························································································
<br />
<script>
function myFunction(){
    x=document.getElementById("demo");
    x.innerHTML="被改变的内容和样式"
    x.style.color="#ff0000";
}
</script>
<p id="demo">JavaScript:改变 HTML 内容</p>
<button type="button" onclick="myFunction()">猛戳这里</button>
<br />
························································································<br />
<p>javascript改变图像</p>
<script>
    function changeImage(){
        element = document.getElementById("myimage")
        if(element.src.match("bulbon")){
            element.src="./eg_bulboff.gif";    
        }else{
            element.src="./eg_bulbon.gif"
        }    
    }
</script>
<img src="./eg_bulboff.gif" id="myimage" onclick="changeImage()"  />
<br />
·······································································
<br />
<script>
    function mytext(){
        var x=document.getElementById("text-demo").value;
        if(x==""||isNaN(x)){
            alert("您输入的不是数字");
        }
    }
</script>
<input type="text" id="text-demo" />
<button type="button" onclick="mytext()">点击</button>
<br />···························································<br />
<button type="button" onclick="myvar()">点击</button>
<p id="demo1"></p>
<script>
    function myvar(){
        var carname = "定义变量";
        document.getElementById("demo1").innerHTML=carname;
    }
</script>
</body>
</html>


相对应的效果图:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:162340次
    • 积分:3081
    • 等级:
    • 排名:第11261名
    • 原创:141篇
    • 转载:51篇
    • 译文:1篇
    • 评论:21条
    文章分类
    最新评论