javascript01_js1-CSDN博客

本文链接：https://blog.csdn.net/qq_42305589/article/details/105984260

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js1</title>

    <!--嵌入JAVASCRIPT  外链式 src=外链的文件名-->
    <script type="text/javascript" src="文件名.js"></script>

    <!--嵌入JAVASCRIPT  嵌入式-->
    <script type="text/javascript">

        alert("你好");

    </script>
    <script type="text/javascript" src=""></script>


</head>
<body>

    <!--嵌入javascript 行间事件 不推荐使用-->
    <input type="button" name="" value="弹框" onclick="alert('hello')">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>


    <script type="text/javascript" >
        //定义变量
        var a = 0;

        //window.onload页面加载后执行
        window.onload = function()
        {
            //获取元素方法
            var va = document.getElementById("div1");

            //操作元素属性方法 .和[]
            //设置属性
            va.style.color = "red";
            //得到属性
            //比如var buf = va.value;



            var vb = document.getElementById("div2");
            //innerHTML 可以读 写 标签包裹里面的内容
            //往div2里写 你好
            vb.innerHTML = "<p>你好</p>";


        }
    </script>


</head>
<body>
    <div id="div1" >
        <p>你好</p>
        ????
    </div>

    <div id="div2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>

    <script type="text/javascript">
        //函数定义
        function fa() {
            alert("hh")
        }
        //函数执行一
        fa();


        //解耦 如果采用的是外链式而且函数要与html分离
        window.onload = function () {
            var button = document.getElementById("buto1");
            button.value = "呵呵";
            //注意在这里函数不能加() 加括号就直接执行了 而我们要在下面html执行
            button.onclick = fa;
        }

    </script>

</head>
<body>
    <!--调用函数二-->
    <input type="button" value="按下" onclick="fa()">

    //函数与html文件分离 只在window.onload里做处理
    <input type="button" value="buto1" id="buto1">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传参</title>

    <script type="text/javascript">
        window.onload = function () {
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var b1 = document.getElementById("b1");

            b1.onclick = function () {
                var a = i1.value;
                var b = i2.value;

                var c = add(a,b);
                alert(c);
            }

            //函数传参
            function add(i,j) {
                //parse int 类型转换
                var k = parseInt(i)+parseInt(j);
                return k;
            }



            //引用字典方式  传参
            var dict = document.getElementById("dict");
            f("color","red");

            function f(d_key,d_value) {
                dict.style[d_key] = d_value;
            }
        }


    </script>
</head>
<body>
    <input type="text" name="" id="i1">
    <input type="text" name="" id="i2">
    <input type="button" name="" value="+" id="b1">

    <div id="dict">简直</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分支</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
        }

    </style>

    <script type="text/javascript">
        window.onload = function () {
            var box = document.getElementById("box");
            var cut = document.getElementById("cut");

            cut.onclick = function () {
                if (box.style.display == "none")
                {
                    box.style.display = "block";
                }else{
                    box.style.display = "none";
                }

            }
            // switch (a){
            //     case x:
            //         print();
            //         break;
            //     case y:
            //         print();
            //         break;
            //     default:
            //         xx
            //         break;
            // }

        }

    </script>

</head>
<body>
<!--给一个按钮 让他可以选择分支切换div的显示和不显示-->
    <div class="box" id="box"></div>
    <input type="button" value="切换" id="cut">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>

    <script type="text/javascript">
        window.onload = function () {
            //数组定义方式
            var arr = new Array(1,2,3,4,"sas");

            var arr1 = [1,2.1,3,4,"a"];
            var arr2 = [[1,2],[3,4],[5,6]];
            //求数组长度
            var len = arr.length;
            //通过下标求数组的元素地址
            var addres = arr1[1];
            var site = arr2[1][1];

            //在前端显示数组的值
            vive();

            function vive()
            {
                alert(len);

                var t1 = document.getElementById("t1");
                t1.value = addres;
                var t2 = document.getElementById("t2");
                t2.value = site;
            }

        }

    </script>
</head>

<body>
    <input type="text" id="t1">
    <input type="text" id="t2">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过标签获取元素</title>

    <script type="text/javascript">

        window.onload = function () {
            //注意这里用的是getElementsBy TagName（获取的是html标签）
            var sa = document.getElementsByTagName("li");
            sa[1].style.backgroundColor = "gold";
            sa[2].style.backgroundColor = "gold";
            alert(sa.length);

            //注意他们是一个集合 但不是数组 不能用数组的增 删pop push

            //用id分区
            var w = document.getElementById("ua");
            var wa = w.getElementsByTagName("li");
            alert(wa.length);
            for(var i=0;i<wa.length;i++)
            {
                if(i%2==0)
                {
                    wa[i].style.backgroundColor = "red";
                }
            }

        }



    </script>

</head>
<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul id="ua">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {

            var array = [1,2,3,1,4,6,5,7,2];
            var array2=[];
            for (var i=0;i<array.length;i++)
            {
                if (array.indexOf(array[i])==i)
                {
                    array2.push(array[i]);
                }

            }
            alert(array2)

        }

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while</title>
    <script type="text/javascript">
        // while(true)
        // {
        //     break;
        // }

// 1、字符串合并操作：“ + ”
// 2、parseInt() 将数字字符串转化为整数
// 3、parseFloat() 将数字字符串转化为小数
// 4、split() 把一个字符串分隔成字符串组成的数组
// 5、charAt() 获取字符串中的某一个字符
// 6、indexOf() 查找字符串是否含有某字符
// 7、substring() 截取字符串 用法： substring(start,end)（不包括end）
// 8、toUpperCase() 字符串转大写
// 9、toLowerCase() 字符串转小写


    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <script type="text/javascript">

        window.onload = function () {

            var num1 = document.getElementById("num1");
            var num2 = document.getElementById("num2");
            var fu = document.getElementById("fuhao");
            var result = document.getElementById("result")
            var but = document.getElementById("but");

            but.onclick = function () {
                var n = num1.value;
                var n1 =num2.value;
                var f = fu.value;
                if (n==""||n1=="")
                {
                    result.value == "null";
                }

                switch(f)
                {
                    case "0":
                        result.value = parseInt(n)+parseInt(n1);
                        break;
                    case "1":
                        result.value = parseInt(n)-parseInt(n1);
                        break;
                    case "2":
                        result.value = parseInt(n)*parseInt(n1);
                        break;
                    case "3":
                        result.value = parseInt(n)/parseInt(n1);
                        break;
                }

            }


        }
    </script>

</head>
<body>
    <input type="text" name="" id="num1">
    <select id="fuhao">
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
    </select>
    <input type="text" name="" id="num2">
    <input type="button" name="" value="计算" id="but">
    <input type="text" name="" id="result">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>times</title>
    <!--定时器：
    setTimeout  只执行一次的定时器
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器-->
    <script type="text/javascript">
        window.onload = function () {

            function myalert(){
                alert("xx")
            }
            var timer = setTimeout(myalert,2000);
            clearTimeout(timer);

            ///
            //xx函数每一秒执行一次
            var si = setInterval(xx,1000);
            var t = 0;
            var n = document.getElementById("numtime");
            function xx() {
                t += 1;
                n.value = t;
                if (t==5)
                {
                    clearInterval(si)
                }

            }
        }

    </script>
</head>
<body>
    <h1>wc这小伙</h1>
    <input type="text" id="numtime">
</body>
</html>