zoukankan      html  css  js  c++  java

  • JavaScript 的入门学习案例，保证学会！

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript for循环</title>
</head>
<body>
<script>
    //输出循环
    function xh() {
       var r="";
       var o="";
       //continue重新循环
        for(var w=0;w<10;w++){
           r+="何安圻我爱你:"+w+"<br>";
           document.getElementById("demo").innerHTML=r;
           if(w==3){
               alert("重新循环");
               continue;
           }
       }
        listw=["金木","佐佐木 绯世","小白发金木","黑发金木","340号","黑色死神"];
        //跳出循环
        for(k=0;k<listw.length;k++){
            document.getElementById("demo2").style.color="green";
            document.getElementById("demo2").innerHTML=o+="我叫:"+listw[k]+"<br>";
            break;
        }
    }
</script>
<p id="demo"></p>
<b id="demo2">东京食尸鬼</b>
<button onclick="xh()">点击</button>
</body>
</html>

//由于javascript的特殊性想要在html上输出循环得多定义一个空的变量然后在相加起来
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript for循环</title>
</head>
<body>
<script>
    //输出循环
    function xh() {
       var r="";
       var o="";
        for(var w=0;w<10;w++){
           r+="何安圻我爱你:"+w+"<br>";
           document.getElementById("demo").innerHTML=r;
       }
       //循环列表
        listw=["金木","佐佐木 绯世","小白发金木","黑发金木","340号","黑色死神"];
        for(k=0;k<listw.length;k++){
            document.getElementById("demo2").style.color="green";
            document.getElementById("demo2").innerHTML=o+="我叫:"+listw[k]+"<br>";
        }
    }
</script>
<p id="demo"></p>
<b id="demo2">东京食尸鬼</b>
<button onclick="xh()">点击</button>
</body>
</html>

//由于javascript的特殊性想要在html上输出循环得多定义一个空的变量然后在相加起来
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript的switch</title>
</head>
<body>
输入:<input id="demo" type="text">
<script>
    function Myfunction() {
        x=document.getElementById("demo");
        zhi=x.value;
        switch (zhi) {
            case zhi==100:alert("x等于100");
            break;
            case zhi>100:alert("x大于100");
            break;
            case zhi<100:alert("小于100");
            break;
        }
    }
</script>
<button onclick="Myfunction()">点击老子</button>
</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript while循环</title>
</head>
<body>
<p id="demo">测试</p>
<script>
    function myfunction(){
        q=0;
        w="";
        a=0;
        g="何安圻我爱你";
        while (a<10) {
            w+=g+ "<br>";
            document.getElementById("demo").innerHTML =w;
            a++;
        }
        lo=["何安圻","姐姐"];
        k=0;
        while (lo[k]){
            document.write(lo[k]);
            k++;
        }
        do{
            alert("何安圻一定是我的");
            q++;
        }while (q<6);

    }



</script>
<button onclick="myfunction()">点击</button>
</body>
</html>

//
while(条件){
    执行的程序
}

do{
    要执行的程序
}while(条件);

while循环遍历列表如上
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript比较</title>
</head>
<body>
输入:<input id="demo" type="text">
<script>
    function Myfunciton() {
        x=document.getElementById("demo").value;
        if(x>10){
            alert('大于10，为True');
        }else if(x==""){
            alert("不能为空");
        } else if (x<10) {
            alert("小于10，为False");
        }else if(x==10){
            alert("等于10");
        }

    }
</script>
<button onclick="Myfunciton()">点我获取结果</button>
</body>
</html>

也是用if来比较
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript语句</title>
</head>
<body>
<h1 id="demo">哈哈</h1>
<button onclick="myFunction()">点我</button>
<script>
   function myFunction() {
       var x=document.getElementById("demo"); //可以用var或者直接创建变量
       x.innerHTML="创建了一个变量";
   }
</script>
</body>
</html>

可以用var或者直接创建变量
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript对象</title>
</head>
<body>
<script>
    persion={ //创建一个对象
        "name":"何安圻", //创建一个key:value
        "now":"17",
        "school":"东莞市石竹"
    };
    document.write("姓名:",persion["name"]+"<br>");
    document.write("年龄:",persion["now"]+"<br>");
    document.write("就读学校:",persion["school"]+"<br>");
</script>
</body>
</html>
    View Code
    js的代码开头和结束
<script>xxx</script>
一般js代码放在<head>js</head>

引用外部js
<script src="xxx.js"></script>

javascript对大小写敏感
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript函数</title>
</head>
<body>
<script>
    document.write("我可以"); //带参数传入函数
    mdeuio("操何安圻吗");
    function mdeuio(name) { //创建一个函数，函数外的为全局函数。函数内的为局部变量，全局变量可以在局部变量访问到
        x=name;
        document.write(x);
        return 0;
    }
</script>
</body>
</html>
    View Code
    javascript写入到HTML输出
<script>
document.write("<h1>因为当事人的能力不足，导致她不需要你</h1>") #document.write("内容") 输出到html中
</script>

javascript 对事件作出反应
<script>
<button type="buttone" onclick="alert('Welcome!')">点击这里</buttone> #onclick事件，触发什么alert("何安圻")
</script>

javascript改变html内容
<script>
function myFunction(){
    x=document.getElmentById("demo"); //查找元素
    x.innerHTML="我草"; //改变内容
}
</script>

例子：
<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction(){ 
x=document.getElementById("demo"); //寻找ID为demo的
x.innerHTML="因为我不够强"; //替换html
}
</script>

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

</body>
</html>

javascript改变样式：
<script>
x=document.getElementById("demo"); //寻找ID为demod 的
x.style.color="#ff0000"; //替换颜色
</script>

JavaScript改变图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript替换图片</title>
</head>
<>
<script>
    function myFunction() {
        x=document.getElementById('demo'); //寻找id为demo
        if (x.src.match('bulbon')){ //判断是否进行了点击
            x.src="http://pic.netbian.com/uploads/allimg/180331/182615-15224919751fac.jpg" //如果没有点击则为这张图片
        }else{
            x.src="http://pic.netbian.com/uploads/allimg/180507/211615-1525698975c9a1.jpg" //如果点击了则为这张图片
        }
    }
    </script>
<img id="demo" onclick="myFunction()" src="http://pic.netbian.com/uploads/allimg/180331/182615-15224919751fac.jpg">
</body>
</html>

javascript验证表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript验证输入</title>
</head>
<body>
<input id="demo" type="text">
<script>
    function myFunction() {
        var x=document.getElementById("demo").value; //获取id为demo，获取标签里的值
        if(x==""||isNaN(x)){ //判断是否为数字
            alert("不能输入数字以外的东西或者不输入") //如果不为则弹框
        }
    }
</script>
<button type="button" onclick="myFunction()">点我进行验证</button>
</body>
</html>

例子看Demo文件：
demo.html -- javascript改变样式
demo2.html -- javscript改变html
demo3.html -- javascript改变图片
demo4.html -- javascript验证输入
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript函数</title>
</head>
<body>
<script>
    document.write("我可以"); //带参数传入函数
    mdeuio("操何安圻吗");
    function mdeuio(name) { //创建一个函数，函数外的为全局函数。函数内的为局部变量，全局变量可以在局部变量访问到
        x=name;
        document.write(x);
        return 0;
    }
</script>
</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript字符串</title>
</head>
<body>
<script>
    function myuio() {
        x=document.getElementById("demo");
        x.innerHTML=alert("iphone is target");
        s=125e-6;
        cars=["何安圻","不需要我","我太弱了"]; //创建一个列表
        for (i=0;i<cars.length;i++){ //遍历列表 cars.length获取列表长度
            document.write(cars[i]+"<br>");
        }
        carname="iphone"; //string类型
        carname2="iphone x";
        carname3="iphone xs";
        tu=true; //布尔类型
        jia=false; //布尔类型
        person={ //对象
            fistname:"john",
            lastname:"Dode",
            id:1
        };
        document.write(person['id']+"<br>");
        document.write(carname);
        document.write("<br>");
        document.write(carname2);
        document.write("<br>");
        document.write(carname3);
        document.write(tu +"<br>");
        document.write(jia);
        alert(s);
    }

</script>
<p id="demo">iphone is 666</p>
<button id="demos" onclick="myuio()">点我干死iphone</button>
</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript函数</title>
</head>
<body>
<script>
    document.write("我可以"); //带参数传入函数
    mdeuio("操何安圻吗");
    function mdeuio(name) { //创建一个函数，函数外的为全局函数。函数内的为局部变量，全局变量可以在局部变量访问到
        x=name;
        document.write(x);
        return 0;
    }
</script>
<button onmouseout="this.innerHTML=Date()">现在时间是</button> //这是一个用户从一个标签移开后触发的事件，常见的事件
事件    描述
onchange    HTML 元素改变
onclick    用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout    用户从一个HTML元素上移开鼠标
onkeydown    用户按下键盘按键
onload    浏览器已完成页面的加载
都可以插入js代码
</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript语句</title>
</head>
<body>
<h1 id="demo">哈哈</h1>
<script>
    x=document.getElementById("demo");
    x.innerHTML="哈哈哈";
    function demo() { //funtion自定义函数
        document.write("为我")
    }
</script>
<button onclick="demo()">点我</button>
</body>
</html>

浏览器按照从上到下执行，函数可以有个条件来进行触发
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>
</head>
<body>
<script>
    function displaydate(){
        x=document.getElementById('demo');
        x.innerHTML=Date();
        a="我叫";
        b="九世";
        d=a+b; //字符串相加
        e=50;
        w=60;
        g=58;
        g*=w;
        q="5";
        q+=5; //JavaScript的特殊性：字符串+数字将成为字符串
        alert(d);
        alert(g);
        alert(q);
    }
</script>
<h1 id="demo">当前时间</h1>
<button onclick="displaydate()">点我刷新当前时间</button>

</body>
</html>

运算符有：
+
-
*
%
/
+=
-=
%=
/=
*=

==
>=
!=
===
<=
<>
JavaScript的特殊性：字符串+数字将成为字符串
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript语句</title>
</head>
<body>
<h1 id="demo">哈哈</h1>
<button onclick="myFunction()">点我</button>
<script>
   function myFunction() {
       var x=document.getElementById("demo"); //可以用var或者直接创建变量
       var a=10;
       var b=11;
       var e=a+b;
       alert(e)
   }
</script>
</body>
</html>
    View Code
  • 相关阅读:
    Unbutu之web环境部署——常用软件安装
    利用百度uaredirect.js判断手机终端并自动跳转
    原生Ajax附件上传简单实例
    shader glsl 函数图举例
    pixijs释放纹理的方法
    pixijs shader透明度设置方法
    pixijs 用canvas的方法
    threejs 解决模型缩小有黑边的解决方案
    threejs 透明模型遮挡后面模型解决方案
    javascript canvas 清除图片空白多余的方法
  • 原文地址：https://www.cnblogs.com/csnd/p/11466962.html
Copyright © 2011-2022 走看看