JS学习笔记98-104（案例-发表评论，九宫格|内置对象Dat

1.发表评论

---

微信图片_20181225212257.png

Math.floor() 与 parseInt()都能实现数字的向下取整

• 1）、Math.floor不能解析字符串；parseInt()把任意字符串转换为整数（必须以数字开头）；
• 2）、praseInt属于类型转换，会对字符逐级判断，占用内存较高；
• 3）、两者的用途、用法都不相同，尽量避免混合使用。

   <div id="box">
       <div class="box-top">
           <label>发表评论：</label>
           <textarea id="my_textarea" cols="60" rows="10"></textarea>
           <button id="btn">发表</button>
       </div>
       <ul id="ul">
       </ul>
   </div>
<script>
    window.onload = function () {
        // 1. 监听按钮的点击
        $('btn').onclick = function () {
            // 1.1 获取用户输入的内容
            var content = $('my_textarea').value;
            // console.log(content);

            // 1.2 判断
            if(content.length === 0){
                alert("请输入评论的内容~");
                return;
            }

            // 1.3 创建li标签放入ul
            var li = document.createElement('li');
            li.innerHTML = content + '<a href="javascript:;">删除</a>';
            // $('ul').appendChild(li);
            $('ul').insertBefore(li, $('ul').children[0]);

            // 1.4 清除输入框中的内容
            $('my_textarea').value = '';

            // 1.5 删除评论
            var as = $('ul').getElementsByTagName('a');

            for(var i =0; i<as.length; i++){
                var a = as[i];
                a.onclick = function () {
                   //  alert(9);
                    // 1.6 获取父标签,删除
                    this.parentNode.remove();
                }
            }
        }
    };
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
</script>

2.九宫格

---

    <div id="top">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="bottom">
        <div class="box">
            <img src="image/1.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/2.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/3.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/4.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/5.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/6.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
    </div>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var btns = document.getElementById("top").children;
        var bottom = document.getElementById("bottom");
        // 2.监听按钮的点击
        btns[0].onclick = function () {
            j_flex(3, bottom);
        };
        btns[1].onclick = function () {
            j_flex(4, bottom);
        };
        btns[2].onclick = function () {
            j_flex(5, bottom);
        };
        function j_flex(allCols, parentNode) {
            // 2.1 定义变量
            var boxW = 220, boxH = 360, marginXY = 15;
            // 2.2 遍历
            for(var i=0; i<parentNode.children.length; i++){
                // 2.2.1 求出当前盒子所在的行和列
                var row = parseInt(i / allCols);
                var col = parseInt(i % allCols);
                //console.log("当前盒子在第" + row  + " ,第" + col);
                // 2.2.2 盒子的定位
                var currentBox = parentNode.children[i];
                currentBox.style.position = 'absolute';
                currentBox.style.left = col * (boxW + marginXY) + 'px';
                currentBox.style.top = row * (boxH + marginXY) + 'px';
            }
        }
    }
</script>

三.内置对象Date()

微信图片_20181225232644.png
微信图片_20181225232729.png

// 1. 声明日期对象
    var date = new Date();
// console.log(date);
    console.log(date.getDate()); // 日
    console.log(date.getDay()); // 星期几
    console.log(date.getMonth() + 1); // 月
    console.log(date.getFullYear() ); // 完整的年份
    console.log(date.getHours() ); // 小时
    console.log(date.getMinutes() ); // 分钟
    console.log(date.getSeconds() ); // 秒
    console.log(date.getMilliseconds() ); // 毫秒
    console.log(date.getTime() ); // 时间戳

3.日期特效。简易日历

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 250px;
            height: 300px;
            padding: 20px;
            margin: 100px auto;
            background-color: orangered;}
        #box #box_top{
            font-size: 23px;
            color: #fff;
            margin-bottom: 40px;
            text-align: center;}
        #box #box_button{
            width: 90%;
            height: 70%;
            background-color: orange;
            margin: 0 auto;
            font-size: 100px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items:center;
        }
    </style>
<div id="box">
    <div id="box_top"></div>
    <div id="box_button"></div>
</div>
<script>
    window.onload = function () {
        var date = new Date();
        console.log(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d  = date.getDate();
        var week = date.getDay();
        var weeks = ['星期日','星期一' ,'星期二','星期叁','星期肆','星期伍','星期六'];
        $('box_top').innerHTML = y + '年' + m + '月' + d + '日 ' + '<br>' + weeks[week];
        $('box_button').innerText = d;
    };
    function $(id) {
        return typeof id === 'string'?document.getElementById(id) : null;
    }
</script>