一些前端效果的實現

選中tr效果

選中tr標籤出現一個選中效果，即給選中的tr添加個顏色，並移除其餘未選中的tr的顏色效果

<style type="text/css">
    tr.focus{background-color: #eee;cursor: pointer;}
</style>

<script type="text/javascript">
  $('tr').on('click',function(){
      var $tr=$(this);
      $tr.parent().find('tr.focus').toggleClass('focus'); //取消原先選中行
      $tr.toggleClass('focus'); //設定當前選中
  });
</script>

效果：顏色#eee(灰色) ，鼠標設置爲手(pointer)的樣式

限制字數輸入

<!--顯示150字的輸入-->
<textarea rows="" cols="" style="width:100%;" maxlength="150" 
        onchange="this.value=this.value.substring(0,150)" 
        onkeydown="this.value=this.value.substring(0,150)"
        onkeyup="this.value=this.value.substring(0,150)"></textarea>

頁面縱向滾動條

<div style="height:600px;overflow-y: scroll;"></div>

選中span文本改變背景色

/*選中span文本改變背景色*/
span::selection {background: #4CB4E7;color: #fff;}   
span::-moz-selection {background: #4CB4E7;color: #fff;} 

解決滾動條出現,頁面發生抖動問題

html {
  overflow-y: scroll;
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;
}
body {
  width: 100vw;
  overflow: hidden;
}