登录  /  注册
博主信息
博文 40
粉丝 0
评论 0
访问量 36341
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JS学习总结(2)数组和常用事件——2019年10月22号20:00分
虎子爸爸
原创
858人浏览过

JS数组实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS数组及常用事件</title>
</head>

<body>
    <h3>JS数组</h3>
    <ul>
        单维数组输出:
        <li>
            第一种:<span id="js-array-a"></span>
        </li>
        <li>
            第二种:<span id="js-array-b"></span>
        </li>
        多维数组输出:
        <li>
            第一种:<span id="js-array-c"></span>
        </li>
        <li>
            第二种:<span id="js-array-d"></span>
        </li>

    </ul>
    <p>
        数组查询:<span id="js-array-e"></span>
    </p>
</body>

</html>
<script>
    //创建单维数组
    var $ = function(id) {
        return document.getElementById(id);
    }
    var newInfo = new Array();
    newInfo[0] = 'xiaohu';
    newInfo[1] = '男';
    var newUser = ['xiaomao', '女'];
    //输出数组

    $('js-array-a').innerHTML = newInfo[0];
    $('js-array-b').innerHTML = newUser[0];

    //创建多维数组
    //var Shop = [newInfo, newUser];
    var Shop = [
        ['xiaohu', '男'],
        ['xiaomao', '女']
    ];
    //输出多维数组
    $('js-array-c').innerHTML = Shop[0][0];
    $('js-array-d').innerHTML = Shop[1][1];
    //输出多维数组
    for (var i = 0; i < Shop.length; i++) {
        if (Array.isArray(Shop[i])) {
            for (var j = 0; j < Shop[i].length; j++) {
                alert(Shop[i][i]);
            }
        } else {
            alert(Shop[i]);
        }
    }
    //查找数组中的元素
    var newShop = ['mao', 'zhu', 'dog'];

    var res = newShop.indexOf('mao');
    if (res != null) {
        $('js-array-e').innerHTML = res;
    } else {
        $('js-array-e').innerHTML = '没有';
    }
    //给newShop数组尾部添加一个新元素push()
    newShop.push('duck');
    console.log(newShop);
    //给newShop数组头部添加新元素unshift()
    newShop.unshift('newmao');
    console.log(newShop);
    //删除newShop数组尾部的最后一个元素pop()
    newShop.pop();
    console.log(newShop);
    //删除newShop数组头部的第一个元素shift()
    newShop.shift();
    console.log(newShop);
    //排序--降序--注意,原数组变了,没有新数组
    var xxx = [10, 3, 28, 15, 12, 90, 30];
    var yyy = xxx;
    var ooo = yyy;
    console.log(yyy);
    xxx.sort(function(a, b) {
        return b - a
    });
    console.log(xxx);
    //排序---升序
    xxx.sort(function(a, b) {
        return a - b
    });
    console.log(xxx);
    console.log(ooo); //注意这里,它变了。
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

JS事件实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #mouse-p-a {
        width: 300px;
        height: 100px;
        background-color: black;
        color: blanchedalmond;
        font-size: 2em;
        text-align: center;
        line-height: 100px;
    }
    
    .mouse-p {
        background-color: blueviolet;
    }
</style>

<body>
    <p>
        <button onclick="javascript:alert('你点了1次!');">点1下试试</button>
        <button ondblclick="javascript:alert('你点了2次!');">点2下试试</button>
        <button onmousedown="bc_down()" onmouseup="bc_up()" id="button-b">按住别动</button>
        <button onclick="bc_time()" id="button-c">定时器</button>
        <button onclick="bc_time_a()" id="button-d">循环启动器</button>
        <button onclick="bc_time_b()" id="button-e">循环关闭器</button>

    </p>
    <p>输入内容<input type="text" name="phone" id="phone" onblur="blur_a()" onfocus="focus_a()"></p>
    <p>输入姓名<input type="text" name="username" id="username" onchange="change_b(this.value)"></p>
    <p>输入作业<input type="text" name="work" id="work" oninput="input_b(this.value)"></p>
    <p id="mouse-p-a" class="miao" onmouseover="p_over()" onmouseout="p_out()"></p>

</body>

</html>
<script>
    //简化函数
    var $ = function(id) {
        return document.getElementById(id);
    }
    var ppp = $('mouse-p-a');

    function bc_down() {
        ppp.innerHTML = "鼠标按下";
    }

    function bc_up() {
        ppp.innerHTML = "鼠标松开";
    }

    function p_over() {
        ppp.className = "mouse-p";
        //alert('jinru');
        ppp.innerHTML = "鼠标进入";

    }

    function p_out() {
        ppp.className = "";
        ppp.innerHTML = "鼠标离开";
    }

    function blur_a() {
        ppp.innerHTML = "输入框失去焦点";
    }

    function change_a(value) {
        ppp.innerHTML = "你输入了" + value;
    }

    function focus_a() {
        ppp.innerHTML = "准备输入...";
    }

    function change_b(value) {
        ppp.innerHTML = "你输入了" + value;
    }

    function input_b(value) {
        ppp.innerHTML = "你输入了" + value;
    }

    function bc_time() {
        time = setTimeout(twoTime, 2000); //2秒后弹窗
    }

    function twoTime() {
        alert('停2秒后弹出这个内容');
    }



    function bc_time_a() {
        //注意这里的time_a 不要加var,不然就成了局部变量,后面查找不到。
        time_a = setInterval(oneTime, 1000); //每1秒执行一次这个oneTime函数
    }


    function oneTime() {
        ppp.innerHTML = "嗨起来:" + Math.ceil(Math.random() * 10000);
    }

    function bc_time_b() {
        clearInterval(time_a);
        ppp.innerHTML = "安静";
    }
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:都是对象!

批改状态:合格

老师批语:写得不错, 记住 了吗?
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学