最近績效裏面添加了一個技術評價,其中裏面的考覈題是使用JS截取字符串截取指定字符串。
這個是我公司裏面得到第一名的代碼。不過我的js水平好差,但是我在他的代碼中學到了一些新的東西。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
var div = $(".div");
var font_s = parseInt(div.css("font-size"));
var line_h = parseInt(div.css("line-height"));
var div_h = div.height();
var div_w = div.width();
var len = Math.floor(div_w/font_s);
var con = div.text();
var con2 = con;
var con_new = Math.floor(div_h/line_h);
con2 = con2.replace(con2.substring(len*(con_new-1)+6,con2.length),"...");//替換
div.text(con2)
$(".radio").click(function(){
$(this).attr("checked","checked").siblings().removeAttr("checked");
div.height(this.value);
div_h = div.height();
var con_new = Math.floor(div_h/line_h);
//alert(div_h + "====" + con_new)
//con3 = con.replace(con.substring(len*(con_new-1)+5,con.length),"...");//替換
//div.text(con3)
con3 = con.substring(0,len*(con_new-1)+6);//截取
div.text(con3 + "...")
})
//con = con.substring(0,len*(con_new-1)+5);//截取
//div.text(con + "...")
})
</script>
<style>
*{margin:0; padding:0}
html{ font-size:14px;}
.div0{ margin:30px;}
.div{ width:300px; height:80px; line-height:24px; border:1px solid #333; margin:30px; padding:5px; }
</style>
</head>
<body>
<div class="div0">
點擊修改高度:
<input type="radio" class="radio" value="50">50px
<input type="radio" class="radio" value="80">80px
<input type="radio" class="radio" value="110">110px
<input type="radio" class="radio" value="140">140px
</div>
<div class="div"> 這是一種土方法,小時候常玩兒。背靠牆或椅背,以頭枕部向後頂牆,頭和身體不動,肌肉緊張收縮,後來聽人說這叫"繃勁兒”;或者雙手交叉放在頭枕部,雙手向前使勁兒,頭枕部向後使勁兒,相互對抗,頭頸不動。鍛鍊時,頸項部的肌肉持續緊張3—5秒,放鬆休息3—5秒爲1個週期。每天鍛鍊100—200次,分5—10組完成。
</div>
</body>
</html>