master

分支 (1)

管理

管理

master

html-demo
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<title>滚动列表</title>
<style>
@-webkit-keyframes nodeInserted {
  from { opacity: 0; }
  to { opacity: 1; }
}


/*为全局所有input组件添加边框发光效果*/
input[type=text]:focus,input[type=password]:focus,textarea:focus,tr:focus{
  outline:none;
  border-color:rgba(241,39,62,.75);
  -webkit-box-shadow:0 0 8px rgba(241,39,52,.5);
  -moz-box-shadow:0 0 8px rgba(241,39,52,.5);
  -o-box-shadow:0 0 8px rgba(241,39,52,.5);
  box-shadow:0 0 8px rgba(241,39,52,.5);
  -webkit-transition:border linear .2s, -webkit-box-shadow linear .5s;
  -moz-transition:border linear .2s, -moz-box-shadow linear .5s;
  -o-transition: border linear .2s, -o-box-shadow linear .5s;
  transition:border linear .2s, box-shadow linear .5s;
}

.hight{
  outline:none;
  border-color:rgba(241,39,62,.75);
  -webkit-box-shadow:0 0 8px rgba(241,39,52,.5);
  -moz-box-shadow:0 0 8px rgba(241,39,52,.5);
  -o-box-shadow:0 0 8px rgba(241,39,52,.5);
  box-shadow:0 0 8px rgba(241,39,52,.5);
  -webkit-transition:border linear .2s, -webkit-box-shadow linear .5s;
  -moz-transition:border linear .2s, -moz-box-shadow linear .5s;
  -o-transition: border linear .2s, -o-box-shadow linear .5s;
  transition:border linear .2s, box-shadow linear .5s;
}

#parentElement > tr {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: nodeInserted;
}
table{
  border: solid;
  width: 50%
}

tr{
  border: solid;
}

</style>
</head>
<body>
<div class="g-doc">
   <table>
    <caption>2019考试成绩排名</caption>
    <thead>
        <tr>
            <th>年级</th>
            <th>学生</th>
            <th scope="col">分数</th>
            <th scope="col">名次</th>
        </tr>
    </thead>
    <tbody id="parentElement">
        <tr id="first">
            <td>二年级</td>
            <td>李四</td>
            <td>100</td>
            <td>1</td>
        </tr>
    </tbody>
</table>


    <input type="button" value="插入一行" id="insert"/>
    <input type="button" value="停止" id="insert" onclick="stop()" />

    <input type="text" value="周边荧光效果" id="insert"/>
</div>
<script>
var timer = setInterval(function() {
    var arr =[0,1,2,3,4,5];
    for(var i = 0; i<arr.length; i++) {
      setTimeout(function(){
        console.log(i)
        add();
      }, i*(4000/arr.length))
    }
},5000)
 /* var intervalID = setInterval(myCallback, 1000);*/

    function myCallback() {
      add();
    }


  var elm = document.getElementById('insert');
  var parentElement = document.getElementById('parentElement');
  elm.addEventListener('click',function(){
    add();
  })

  function add() {
    var tr = document.createElement('tr');

    var td = document.createElement('td');
    td.innerText = '一年级';
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerText = '张三';
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerText = '89';
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerText = '3';
    tr.appendChild(td);

    tr.className = 'hight';

    var elms = parentElement.getElementsByTagName("tr");
    if (elms.length > 0) {

        for (var i in elms) {
          if (elms[i].className == 'hight')   {
            elms[i].className = '';
          }
        }

        parentElement.insertBefore(tr, elms[0]);
    } else {
        parentElement.appendChild(tr);
    }

  }

  function stop() {
    clearInterval(intervalID);
  }

</script>

</body>

</html>