第二阶段day9

作者: 大漠判官1 | 来源:发表于2018-11-08 20:53 被阅读0次

77-百日生涯营 D43|自省日
Day43【百日生涯营】✖️93号乐晓麦20180716
第二阶段day9
100天之day9
尔美明明没猫
新年送给自己一份特别的礼物🎁#坚持冥想💯天#
刺猬成长记录第三周
2018-09-11
2822-20170504
2018年12月19日

闪烁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #container {
                width: 800px;
                height: 400px;
                margin: 10px auto;
                border: 1px solid black;
                overflow: hidden;
            }
            #buttons {
                width: 800px;
                margin: 10px auto;
                text-align: center;
            }
            #add, #fla {
                border: none;
                outline: none;
                width: 80px;
                height: 30px;
                background-color: red;
                color: white;
                font-size: 16px;
                cursor: pointer;
            }
            .small {
                width: 80px;
                height: 80px;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="buttons">
            <button id="add">添加</button>
            <button id="fla">闪烁</button>
        </div>
        <script src="js/mylib.js"></script>
        <script>
            var bigDiv = document.querySelector('#container');
            var addButton = document.querySelector('#add');
            addButton.addEventListener('click', function() {
                var smallDiv = document.createElement('div');
                // smallDiv.className = 'small';
                smallDiv.style.width = '80px';
                smallDiv.style.height = '80px';
                smallDiv.style.float = 'left';
                smallDiv.style.backgroundColor = randomColor();
                bigDiv.insertBefore(smallDiv, bigDiv.firstChild);
            });
            var flaButton = document.querySelector('#fla');
            var isFlashing =false;
            var timerId;
            flaButton.addEventListener('click', function(evt){
                isFlashing =!isFlashing
                if(isFlashing){
                    timerId = window.setInterval(function(){
                        var divs = document.querySelectorAll('#container>div');
                        for(var i=0;i<divs.length;i+=1){
                            divs[i].style.backgroundColor=randomColor();
                        }
                    },200);
                    flaButton.textContent='暂停';
                }else{
                    window.clearInterval(timerId);
                    flaButton.textContent='闪烁';
                }
                    
                
                // var smallLabl =document.querySelectorAll('#contaier div')
                
//              window.setTimeout(function(){
//                  for(var index =0;index<smallLabl.length;index+=1)
//                  {
//                      smallLabl[index].style.backgroundColor=randomColor()
//                  }
//                  window.setTimeout(arguments.callee,1000)
//              },1000)
            });
            
        </script>
    </body>
</html>

表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #data {
                border-collapse: collapse;
            }
            #data td, #data th {
                width: 120px;
                height: 40px;
                text-align: center;
                border: 1px solid black;
            }
            #buttons {
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <table id="data">
            <caption>数据统计表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高</th>
                <th>体重</th>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item1</td>
                <td>Item3</td>
                <td>Item43</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item2</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item3</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item4</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item5</td>
                <td>Item2</td>
                <td><a>Item3</a></td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item6</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td><a>Item5</a></td>
            </tr>
        </table>
        <div id="buttons">
            <button id="pretty">美化表格</button>
            <button id="clear">清除数据</button>
            <button id="remove">删单元格</button>
            <button id="hide">隐藏表格</button>
        </div>
        <script src="js/mylib.js"></script>
        <script>
            function prettyfy(){
            var trs =document.querySelectorAll('#data tr');
            var color1 =randomColor();
            var color2 =randomColor();
            for (var i=0;i<trs.length;i+=1){
                trs[i].style.backgroundColor=
                i % 2 ==0? color1:color2;
                }       
            }
            
            function clear(){
            var tds =document.querySelectorAll('#data td'); 
            for (var i=0;i<tds.length;i+=1){
                tds[i].textContent='';
            }
            }
            function removeLestRow(){
                var table =document.getElementById('data');
                var trs =document.querySelectorAll('#data>tr');
                if (table.rows.length>1){
                    table.deleteRow(table.rows.length-2);
                }
            }
            function hideTable(){
                var table =document.getElementById('data')
                table.style.visibility='hidden';//visible显示
            }
            
            +function(){
                var prettyBtn=document.querySelector('#pretty');
                prettyBtn.addEventListener('click',prettyfy);
                
                var clearBtn=document.querySelector('#clear');
                clearBtn.addEventListener('click',clear);
                
                var removeBtn=document.querySelector('#remove');
                removeBtn.addEventListener('click',removeLestRow);
                
                var hideBtn=document.querySelector('#hide');
                hideBtn.addEventListener('click',hideTable);
                }();  //设为局部变量
        </script>
    </body>
</html>

流氓广告

<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style>
            #adv{
                height: 300px;
                width: 200px;
                
                color: white;
                background-color:blue;
                position: absolute;
                right: 10px;
                top: 10px;
            }
            #adv button{
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="adv">此广告位招租<button>关闭</button></div>
        <script>
            //              button.addEventListener('click',function(){
            //                  advDiv.style.display='none'
            //              });
            +function() {
                var advDiv =document.querySelector('#adv');
                var button =document.querySelector('#adv button');
                var counter = 0;
                button.addEventListener('click',function(){
                    counter +=1;
                    if (counter<3){
                        var currentStyle = document.defaultView.getComputedStyle(advDiv);
                        var newTop=parseInt(currentStyle.top)+20;
                        advDiv.style.top =newTop +'px';
                        var newRight=parseInt(currentStyle.right)+20;
                        advDiv.style.right =newRight +'px';
                    }else{
                        advDiv.style.display='none';
                    }
                });
            }();
            
//          +function() {
//              var advDiv = document.querySelector('#adv');
//              var button = document.querySelector('#adv button');
//              var counter = 0;
//              button.addEventListener('click', function() {
//                  counter += 1;
//                  if (counter < 3) {
//                      var currentStyle = 
//                          document.defaultView.getComputedStyle(advDiv);
//                      var newTop = parseInt(currentStyle.top) + 20;
//                      var newRight = parseInt(currentStyle.right) + 20;
//                      advDiv.style.top = newTop + 'px';
//                      advDiv.style.right = newRight + 'px';
//                  } else {
//                      advDiv.style.display = 'none';
//                  }
//              });
//          }();
            
            // 鼠标按下 -mousedown
            // 鼠标移动   mousemove
            // 鼠标松开   mouseup
            // clientX/clientY  鼠标的横纵坐标
        </script>
    </body>
</html>

jQuery 表格

<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style>
            #data {
                border-collapse: collapse;
            }
            #data td, #data th {
                width: 120px;
                height: 40px;
                text-align: center;
                border: 1px solid black;
            }
            #buttons {
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <table id="data">
            <caption>数据统计表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高</th>
                <th>体重</th>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item1</td>
                <td>Item3</td>
                <td>Item43</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item2</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item3</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item4</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item5</td>
                <td>Item2</td>
                <td><a>Item3</a></td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item6</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td><a>Item5</a></td>
            </tr>
        </table>
        <div id="buttons">
            <button id="pretty">美化表格</button>
            <button id="clear">清除数据</button>
            <button id="remove">删单元格</button>
            <button id="hide">隐藏表格</button>
        </div>
        <!-- 下面这种加载到本地适合开发和测试使用 -->
        <script src="js/jquery.min.js"></script>
        <!-- 下面这种方式适合商业项目，通过CDN服务器来加速获取jQuery加速 -->
        <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
        <script>
            $(function() {
                $('#hide').on('click',function(){
                    $('#data').fadeOut(2000);
                });
//              $('#hide').on('click', function() {
//                  // 根据样式表选择器获取元素 获取到的不是原生的JS对象
//                  // 而是经过jQuery封装过后的对象（有更多的方法方便操作）
//                  $('#data').fadeOut(2000);
//              });
                $('#remove').on('click',function(){
                    $('#data tr:gt(0):last-child').remove();
                });
                $('#clear').on('click',function(){
                    // $('#data tr:gt(0)>td').text('');
                    $('#data tr:gt(0)>td').html('&nbsp');
                });
                $('#pretty').on('click',function(){
                    $('#data tr:gt(0):odd').css('background-color','#ccc');
                    $('#data tr:gt(0):even').css('background-color','red');
                });
            });//整个页面加载后执行该函数内容
        </script>
    </body>
</html>

jQuery 动态添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #container {
                margin: 20px 50px;
            }
            #fruits li {
                list-style: none;
                width: 200px;
                height: 50px;
                font-size: 20px;
                line-height: 50px;
                background-color: cadetblue;
                color: white;
                text-align: center;
                margin: 2px 0;
            }
            #fruits>li>a {
                float: right;
                text-decoration: none;
                color: white;
                position: relative;
                right: 5px;
            }
            #fruits~input {
                border: none;
                outline: none;
                font-size: 18px;
            }
            #fruits~input[type=text] {
                border-bottom: 1px solid darkgray;
                width: 200px;
                height: 50px;
                text-align: center;
            }
            #fruits~input[type=button] {
                width: 80px;
                height: 30px;
                background-color: coral;
                color: white;
                vertical-align: bottom;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <!-- <a href="mailto:957658@qq.com">联系站长</a> -->
        <div id="container">
            <ul id="fruits">
                <!-- a标签有默认的跳转页面的行为有两种方法可以阻止它的默认行为-->
                <li>苹果<a href="">×</a></li>
                <li>香蕉<a href="">×</a></li>
                <li>火龙果<a href="">×</a></li>
                <li>西瓜<a href="">×</a></li>
            </ul>
            <input id="name" type="text" name="fruit">
            <input id="ok" type="button" value="确定">
        </div>
        <script src="js/jquery.min.js"></script>
        <script>
            function removeItem(evt) {
                evt.preventDefault();
                // $函数的第四种用法:参数是原生JavaScript对象
                // 将原生的JS对象包装成对应的jQuery对象
                $(evt.target).parent().remove();
            }
            
            // $函数的第一种用法:$函数的参数是另一个函数(lamda)
            // 传入的函数是页面加载完成之后要执行的回调函数
            $(function() {
                // $函数的第二种用法:参数是一个选择器字符串
                // 获取元素,并且得到与之对应的jQuery对象(伪数组)
                $('#fruits a').on('click',removeItem)
                $('#ok').on('click',function(){
                        var fruitName = $('#name').val().trim();
                        if(fruitName.length>0){
                            $('#fruits').append(
                            // $函数的第三种用法:参数是一个标签字符串
                            // 创建新元素斌得到与之对应的jQuery对象
                                $('<li>').text(fruitName).append(
                                    $('<a>').attr('href','').text('x').on('click'.removeItem)
                                   )
                                );
                        }
                        // jQuery对象通过下标运算或get()方法会得到原生JS对象
                        $('#name').val('').get(0).focus();
                });
            });
        </script>
    </body>
</html>

77-百日生涯营 D43|自省日
第二阶段 DAY9 【作业打卡】自省日：人们总是不自觉地夸大自己的良好品质，忽略自己的不良品质，这种现象叫做“拔...
Day43【百日生涯营】✖️93号乐晓麦20180716
#百日生涯营# 第二阶段 DAY9 自省日一、作业自省日：人们总是不自觉地夸大自己的良好品质，忽略自己的不良品...
第二阶段day9
闪烁表格流氓广告 jQuery 表格 jQuery 动态添加
100天之day9
day9
尔美明明没猫
day9
新年送给自己一份特别的礼物🎁#坚持冥想💯天#
Day9
刺猬成长记录第三周
day9～day14 2018.3.12(周一)～2018.3.17(周六) day9『2018/03/12』周一...
2018-09-11
Day9~Day10
2822-20170504
手账打卡day9
2018年12月19日
摄影日更 Day9