js基础，js常用的事件

js 的三种书写的位置；

①内部书写；

②外链式；

③内行式；[必须使用事件触发才能调用JS语句]；

<!--内链式 外联是，和外线是-->
<script type="text/javascript">
    alert("使用内链式");
</script>
<script src="out.js"></script><!--使用外部引入-->
<!--使用第三种方法 行内式（不会主动触发，需要使用条件触发）-->
<input type="button" value="点击触发js行内式" onclick="alert('使用js的行内式点击触发函数')">

字符串解析转换；parseInt,parseFloat,isNaN(来判断换是否是number ，不是返回true，是返回false)；

<script type="text/javascript">
    var str="123.01asdf123";
    var number = parseInt(str);
    document.write(number+"<br/>");//123
    var number1 = parseFloat(str);
    document.write(number1+"<br/>");//123.01
    document.write(isNaN(str)+"<hr/>");//是数字返回true
</script>

运行如下；

js 数组常用的方法;concat( ),reverse( ),sort( ),join( String str)是按照字符拼接字符串;

<!--concat ,reverse, join(),sort()-->
<script type="text/javascript">
    var arr1 = [1, 3, 6, 7, 0];
    var arr2 = [1, 34, 56, 2, 5];
    var concat = arr1.concat(arr2);
    document.write(concat+"<br/>");

    var reverse = concat.reverse();
    document.write(reverse+"<br/>");

    var sort = reverse.sort();/*是按照字典顺序排序的*/
    document.write("按照字典顺序排序："+sort+"<br/>");
    reverse.sort(function (a, b) { return a-b ;});
    document.write("按照顺序排序："+reverse+"<br/>");

    var str = reverse.join("-");
    document.write("使用分割符拼接字符串："+str+"<hr/>");
</script>

运行；

数组的特点；

1，可以包含不同的method

2，可以装不同数据类型

3，长度可变

<!--js数组的特点;数组中可以装不同数据类型的数据-->
<script type="text/javascript">
    var array = new Array();    /*array.length=0*/
    var array1 = new Array(5);    /*array1.length=5*/
    var array2 = new Array(1, 2, 1, 2, 2, 1, 5);
    var arr = [1, 1.0, true, "hello"];
    for (var i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br/>");
    }
</script>

运行；

js时间；tolaocalstring 按照本地格式化获取当前时间；newDate() 是获取当前时间；

<!--时间  tolocalstring-->
<script type="text/javascript">
    document.write("本地时间："+new Date()+"<br/>");
    document.write("本地时间格式化："+new Date().toLocaleString()+"<hr/>");
</script>

运行；

事件三要素：

事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
执行指令：事件触发后需要执行的代码，一般使用函数进行封装

语法格式：事件源.事件类型=执行指令

轮播图；

<head>
    <meta charset="UTF-8">
    <title></title>
    <!--设置图片的显示-->
    <style type="text/css">
        div {
            width: 600px;
            margin: 50px auto;
        }
    </style>

</head>
<body>
<div id="tu">
    <img src="../../img/01.jpg" width="100%" alt="tu" id="pic">
</div>

<!--使用加载函数-->
<script type="text/javascript">
    window.onload;
    var elementById = document.getElementById("pic");
    var x = 1;
    window.setInterval(function f() {
        x++;
        elementById.src = "../../img/0" + x + ".jpg";
        //判断x
        if (x == 8) {
            x = 0;
        }
    }, 1000);
</script>
</body>

setInterval(timer)和clearInterval（timer）的使用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mathRandom</title>
    <style type="text/css">
        body {
            text-align: center;
        }
    </style>
    <!--1，分别给input标签绑定setinterval ,clearinterval 单击事件
    2，在h标签中设置内容innerHTML，为arr数组中的内容
    3，清除时间clearinterval(timer)

    -->
    <script>
        window.onload = function () {
            //获取input数组标签，h标签的元素
            var inputs = document.getElementsByTagName("input");
            var h2 = document.getElementsByTagName("h2");
            var arr = ["张三", "李四", "王五", "赵六", "田七", "大八", "九九"];
            var timer;
            //
            inputs[0].onclick = function () {
                window.clearInterval(timer);
                timer = window.setInterval(function () {
                    var index = window.parseInt(Math.random() * arr.length);
                    h2[0].innerHTML = arr[index];//该处出现错误==
                }, 10);
            }
            inputs[1].onclick = function () {
                window.clearInterval(timer);
            }
        }
    </script>
</head>
<body>
<h2>点击抽奖</h2>
<input type="button" value="点击开始">
<input type="button" value="点击停止">
</body>
</html>

运行效果；

js基础，js常用的事件

猜你喜欢