JS练习案例

var a = '';
for (var i = 1; i <= 9; i++) {
    for (var n = 1; n <= i; n++) {
        a = a + n + 'x' + i + '=' + i * n + ' ';

    }
    console.log(a);
    a = '';

}

var a = '';

for (var i = 1; i <= 10; i++) {
    for (var n = 1; n <= i; n++) {
        a = a + '爱';

    }
    console.log(a);
    a = '';
}

var youmoney = 100;
while (youmoney != -100) {
    var a = prompt('请输入您想要的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
    if (a == 4) {
        alert('您正在退出！');
        break;
    }
    switch (a) {
        case '1':
            youmoney += parseFloat(prompt('请您输入存的钱数：'));
            alert('存钱成功！您现在的钱数是：' + youmoney);
            break;
        case '2':
            var b = prompt('请您输入取的钱数：');
            while (parseFloat(b) > youmoney) {
                var b = prompt('您的余额不足！\n请您重新输入取的钱数：');
            }
            youmoney -= parseFloat(b);
            alert('取钱成功！您现在的钱数是：' + youmoney);
            break;


        case '3':
            alert('您现在的钱数是：' + youmoney);
            break;

        default:
            alert('请您输入正确的数');
            break;

    }
}

var arr = [1, 2, 3, 0, 6, 0, 5, 0, 9];
var newarr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] != 0) {
        newarr[newarr.length] = arr[i];  //newarr.length会动态变化，注意理解
    }
}
console.log(newarr);

var arr = [6, 2, 3, 11, 6, 30, 5, 12, 9, 1, 3, 2, 80];
for (var i = 0; i < arr.length - 1; i++) {  //表示执行的趟数
    for (var j = 0; j < arr.length - i - 1; j++) {   //表示每趟执行的次数
        if (arr[j] < arr[j + 1]) {
            var t = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = t;
        }
    }
}
console.log(arr);  //[80, 30, 12, 11, 9, 6, 6, 5, 3, 3, 2, 2, 1]

var arr1 = [16, 3, 69, 0];
arr1.sort(function(a, b) {
    return a - b;     //升序  换成b-a为降序
});
console.log(arr1); //[0, 3, 16, 69]

function getMax() {
    var max = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(4, 6, 9, 69));  //69

function reverse(arr) {   //reverse任意数组
    var newarr = [];
    for (var i = arr.length; i >= 0; i--) {
        newarr[newarr.length] = arr[i];
    }
    return newarr;
}

var a = reverse([3.4, 6, 9, 3, 1]);
console.log(a);    //[1,3,9,6,3.4]

//用户输入年份，输出对应2月份天数
function backDay() {
    var year = prompt('请您输入年份：');
    if (isRunYear(year)) {                      //调用isRunYear函数
        alert('当前年份是闰年，2月份有29天');
    } else {
        alert('当前年份是平年，2月份有28天');
    }
}

backDay(); //调用backDay函数

//判断是否是闰年的函数
function isRunYear(year) {
    var flag = false;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        flag = true;
    }
    return flag;
}

var date = new Date();
var year = date.getFullYear(); //年
var month = date.getMonth() + 1; //月 返回的月份小一个月，所以+1
var dates = date.getDate(); //日
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay(); //星期几 周日是0，周一是1，周六是6
function getTime() {
    var h = date.getHours();
    h = h < 10 ? '0' + h : h;
    var m = date.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = date.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}

console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day] + getTime());

function countDown(time) {
    var nowTime = +new Date(); //返回当前时间总的毫秒数
    var inputTime = +new Date(time); //返回输入时间总的毫秒数
    var times = (inputTime - nowTime) / 1000; //剩余时间总的秒数
    var d = parseInt(times / 60 / 60 / 24); //天
    d = d < 10 ? '0' + d : d;

    var h = parseInt(times / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;

    var m = parseInt(times / 60 % 60); //分
    m = m < 10 ? '0' + m : m;

    var s = parseInt(times % 60); //秒
    s = s < 10 ? '0' + s : s;

    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2021-1-23 08:00:00'));

function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

var demo = unique([1, 3, 9, 6, 3, 3, 'a', 'a']);
console.log(demo); //[1, 3, 9, 6, "a"]

var str = 'abnchachnaacahaoapa';
var index = str.indexOf('a');
var num = 0;
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('a', index + 1);
}
console.log('a出现的次数是：' + num);

var str = 'abcdohjokeiokokjoooopp';
var o = {}; //创建一个空对象
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); //chars 是 字符串的每一个字符
    if (o[chars]) { //0[chars]得到的是属性值
        o[chars]++;
    } else {
        o[chars] = 1; //若o[chars]为undefined不为true 即没有该属性则创建个该属性且赋值为1
    }
}
console.log(o);
//遍历对象
var max = 0;
var ch = '';
for (var k in o) {
    //k得到的是属性名
    //o[k]得到的是属性值
    if (o[k] > max) {
        max = o[k];
        ch = k;
    }
}

console.log('最多的字符是' + ch + ',' + '出现次数为' + max);

<body>
    <p>我我我</p>

    <script>
        var p = document.querySelector('p');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            p.innerHTML = '上午也要好好写代码哦！'
        } else if (h < 18) {
            p.innerHTML = '下午也要好好写代码哦！'
        } else {
            p.innerHTML = '晚上也要好好写代码哦！'
        }
    </script>

</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box button {
            position: absolute;
            top: 3px;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <button class="btn"> 显示</button>
        <input type="password" id="pwd">
    </div>
    <script>
        var flag = 0;
        var btn = document.querySelector('.btn');
        var pwd = document.querySelector('#pwd');
        btn.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
                btn.innerHTML = '隐藏';
                flag = 1;
            } else {
                pwd.type = 'password';
                btn.innerHTML = '显示';
                flag = 0;
            }

        }
    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 407px;
            margin: 100px auto;
        }

        .tab_list ul {
            width: 407px;
            height: 39px;
            background-color: rgb(241, 236, 236);
        }

        .tab_list li {
            line-height: 39px;
            height: 39px;
            padding: 0 20px;
            text-align: center;
            list-style: none;
            float: left;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: blue;
            color: white;
        }

        .tab_con {
            width: 407px;
            height: 300px;
            background-color: turquoise;
        }

        .tab_con .item {
            display: none;
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <div class="tab">
        <!-- 导航部分 -->
        <div class="tab_list">
            <ul>
                <li class="current">导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
            </ul>
        </div>
        <!-- 内容部分 与导航部分一一对应 -->
        <div class="tab_con">
            <div class="item" style="display: block;">导航1内容</div>
            <div class="item">导航2内容</div>
            <div class="item">导航3内容</div>
            <div class="item">导航4内容</div>
            <div class="item">导航5内容</div>
        </div>
    </div>
    <script>
        //获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.getElementsByClassName('item');

        for (var i = 0; i < lis.length; i++) {
            //为li自定义一个data-index属性，表示序号
            lis[i].setAttribute('data-index', i);
            //注册点击li后的事件
            lis[i].onclick = function() {
                //排他思想，先去除所有li的指定样式 这里指的是
                //去除current的class标签
                for (var i = 0; i < lis.length; i++) {
                    lis[i].removeAttribute('class');
                }
                //再保留自己的指定样式 为自己重新加上current的class标签
                this.className = 'current';
                //获取当前点击的li的序号，便于显示指定内容
                var index = this.getAttribute('data-index');
                //排他思想 把所有内容隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                //保留自己，把点击的li对应的内容显示出来
                items[index].style.display = 'block';

            }
        }
    </script>

</body>

</html>

<body>
    //文本框
    <textarea></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                //创建元素
                var li = document.createElement('li');
                //把文本框里的输入内容赋值到li中，
                //并在li中添加一个删除的链接，
                //并且javascript:;表示点击该链接不跳转
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                //添加元素，将li添加到ul第一个子节点的前面
                ul.insertBefore(li, ul.children[0]);
                //清空文本框
                text.value = '';
                //获取全部的删除链接元素
                var as = document.querySelectorAll('a');
                //给每一个删除链接注册事件
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        //删除ul中的this.parentNode节点
                        //this.parentNode表示当前删除链接的父节点
                        //即当前删除链接所在的li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

</body>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    //不要忘记绝对定位
        p {
            position: absolute;
        }
    </style>
</head>

<body>

    <p>我是跟屁虫</p>
    <script>
        var p = document.querySelector('p');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            p.style.left = x + 'px';
            p.style.top = y + 'px';

        })
    </script>

</body>

</html>

<input type="text">

    <script>
        var ipt = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 83) {
                ipt.focus();
            }
        })
    </script>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .search {
            position: relative;
            width: 160px;
            margin: 150px auto;
        }

        .con {
            /* 默认隐藏 */
            display: none;
            position: absolute;
            top: -40px;
            width: 160px;
            height: 25px;
            border: 1px solid rgba(0, 0, 0, .2);
            /* 阴影 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            //文字垂直居中，25px：高度为母盒子的高度
            line-height: 25px;
        }
        /* con div下的三角 ：设置宽高为0，然后调边距*/

        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 12px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>

    <script>
        var con = document.querySelector('.con');
        var jd = document.querySelector('.jd');
        //方法监听注册事件（键盘松开事件）
        //此处不用keydown和keypress原因见下方视频
        jd.addEventListener('keyup', function() {
            if (this.value == '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
                con.innerText = this.value;
            }
        })
             //当我们失去焦点，隐藏con盒子
        jd.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            //当我们获得焦点，显示con盒子
        jd.addEventListener('focus', function() {
            //文本框不为空时才显示
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //使用dom窗口加载事件将js代码提到前边
        window.addEventListener('load', function() {
            var ad = document.querySelector('.ad');
            //运用定时器，定时5000毫秒(5秒)
            //定时器中的函数采用调用函数名不用加()，函数在外部写
            //当然定时器中也可以直接写匿名函数
            setTimeout(n, 5000);
            //声明一个将广告图片隐藏的函数
            function n() {
                ad.style.display = 'none';
            }
        })
    </script>
</head>

<body>
    <!-- 广告图片 -->
    <img src="img/Snipaste_2021-02-15_16-52-40.png" alt="" class="ad">
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            float: left;
            margin-left: 4px;
            width: 60px;
            height: 60px;
            background-color: #333;
            color: white;
            font-size: 40px;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中，60px等于母盒子高度 */
            line-height: 60px;
        }
    </style>

</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>


    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        //返回输入时间总的毫秒数赋值给inputTime
        var inputTime = +new Date('2021-2-28 12:00:00');

        countDown(); //先调用一次函数，防止第一次刷新页面有空白

        //开启定时器
        setInterval(countDown, 1000); //每秒调用一次函数

        //获取倒计时时间的函数
        function countDown() {
            //返回当前时间总的毫秒数给nowTime 
            var nowTime = +new Date();
            //剩余时间总的秒数
            var times = (inputTime - nowTime) / 1000;

            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; //把剩余的小时给小时盒子

            var m = parseInt(times / 60 % 60); //分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; //把剩余的分钟给分钟盒子

            var s = parseInt(times % 60); //秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s; //把剩余的秒给秒盒子

        }
    </script>
</body>

</html>

电话号码：<input type="text"><button>发送</button>

    <script>
        var btn = document.querySelector('button');
        //定义一个全局变量存放倒计时间
        var time = 3;
        //设置按钮点击事件
        btn.addEventListener('click', function() {
            //禁用按钮
            btn.disabled = true;
            //设置倒计时
            var timer = setInterval(function() {
                if (time == 0) {
                    //清楚倒计时
                    clearInterval(timer);
                    //复原按钮
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    //复原time的值
                    time = 3;
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000)
        })
    </script>

<div></div>

    <script>
        var div = document.querySelector('div');
        var time = 5;
        //将定时器中的函数提到外边，并在外边提前调用一下函数
        //可以解决页面刚进去时页面内容显示延迟的问题
        function fn() {
            if (time == 0) {
                //利用给location对象的href属性赋值的方法改变页面地址
                location.href = 'http://www.baidu.com';

            } else {
                div.innerHTML = time + '秒后跳转到百度首页';
                time--;

            }
        }
        fn();
        setInterval(fn, 1000);
    </script>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .f {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px;
        }
    </style>

</head>

<body>
    <div class="f"> </div>
    <script>
        var f = document.querySelector('.f');
        f.addEventListener('mousemove', function(e) {
      //获取x坐标：鼠标x轴的位置（相对与浏览器窗口）减去父盒子的左偏移
            var x = e.pageX - this.offsetLeft;
      //获取y坐标：鼠标y轴的位置（相对与浏览器窗口）减去父盒子的上偏移
            var y = e.pageY - this.offsetTop
            this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除链接下划线并且改变颜色 */

        a {
            text-decoration: none;
            color: black;
        }

        .login-header {
            font-size: 28px;
            text-align: center;
        }

        .login {
            /* 先默认隐藏 */
            display: none;
            /* 利用固定定位实现盒子水平垂直居中 */
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* ----------------- */
            width: 410px;
            height: 215px;
            background-color: #ffffff;
            /* 边框 */
            border: #ebebeb solid 1px;
            /* 边框阴影 */
            box-shadow: 0px 0px 20px #ddd;
            /* 遮盖层用的也是固定定位，这里使login的z-index大于遮盖层的
            使login显示在遮盖层上边 */
            z-index: 1;
        }

        .title {
            width: 410px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .title span {
            position: absolute;
            font-size: 12px;
            right: -10px;
            top: -10px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 30px;
            height: 30px;
            /* 圆角 */
            border-radius: 20px;
            line-height: 30px;
        }

        .login-input-content {
            width: 280px;
            margin: 15px auto;
        }

        .login-input {
            height: 35px;
            line-height: 35px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            font-size: 14px;
        }

        .login-button {
            margin: 0 auto;
            width: 200px;
            height: 50px;
            border: #ebebeb solid 1px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .login-bg {
            background-color: rgba(0, 0, 0, .3);
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
        }
    </style>

</head>

<body>
    <div class="login-header"><a href="javascript:;" id="link">点击登录</a></div>
    <div class="login">
        <div class="title">登录会员
            <span><a href="javascript:;" id="closeBtn">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="text" placeholder="请输入密码">
            </div>
        </div>
        <div class="login-button"><a href="javascript:;">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div class="login-bg"></div>
    <script>
        //1.获取元素
        var link = document.querySelector('#link');
        var login = document.querySelector('.login');
        var title = document.querySelector('.title');
        var Btn = document.querySelector('#closeBtn');
        var mask = document.querySelector('.login-bg');
        //2.点击弹出层这个链接 让login和mask显示出来
        link.addEventListener('click', function() {
                login.style.display = 'block';
                mask.style.display = 'block';

            })
            //3.点击关闭 隐藏login和mask
        Btn.addEventListener('click', function() {
                login.style.display = 'none';
                mask.style.display = 'none';
            })
            //4.开始拖拽
            //(1) 当鼠标按下
        title.addEventListener('mousedown', function(e) {
            //改变光标
            this.style.cursor = 'move';
            //获得鼠标坐标
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            //(2)当鼠标移动
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';

            }
            //(3)当鼠标弹起
            document.addEventListener("mouseup", function() {
                //清楚鼠标移动事件
                document.removeEventListener('mousemove', move);
                //恢复光标
                title.style.cursor = 'auto';

            })

        })
    </script>
</body>

</html>