BOOS信息展示与收缩

  BOOS直聘:最近在找工作,用BOOS直聘,感觉用户体验很好,看到那个显示部分信息,就想用原生写写看看。

展示效果

Demo

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="container">
<div class="page">
<div class="con-text">
<div class="job-text">
<div class="job-top color1">
<span>职位描述</span>
<i class="weui_icon_checked"></i>
</div>
<div id="text-mian" class="job-main">
你好忙
</div>
<div id="Btns" class="job-bot color1">显示全部</div>
</div>
</div>
<div class="con-text">
<div class="job-text">
<div class="job-top color1">
<span>职位描述</span>
<i class="weui_icon_checked"></i>
</div>
<div id="text-mians" class="job-main">
1.参与产品的前端开发,与后端工程师协作,高质高效完成产品的数据交互、动态信息展现;<br />
2.提升产品的用户体验、前端性能以及团队的开发效率;<br />
3.研究和探索创新的开发思路和前沿的前端技术,应用到团队与产品中。<br />

1.熟练掌握各种Web前端技术(HTML/CSS/Javascript)和跨浏览器、跨终端的开发;<br />
2.深刻理解Web标准,对前端性能、可访问性、可维护性等相关知识有实践的了解和实践经验;<br />
3.熟悉HTML5,前沿JS类库和MVC框架者优先;<br />
4.熟练使用一门非前端脚本语言(如:NodeJS、Python、PHP等),并有实践项目;<br />
5.在博客或GitHub上有技术沉淀者优先;
</div>
<div id="Btnss" class="job-bot color1">显示全部</div>
</div>
</div>
<div class="Bottom"></div>
</div>
<div class="con-bot">
<div class="Bleft">
<a href="javascript:;"><i></i><span>+收藏</span></a>
</div>
<div class="Bright">
<a href="javascript:;"><i></i><span>立即沟通</span></a>
</div>
</div>
</div>

<div class="sidebar-section">
<div class="section-detail">
<p class="text-center shop-detail"><strong>手机扫码访问</strong></p>
<p class="text-center weixin-title">微信“扫一扫”分享到朋友圈</p>
<p class="text-center qr-code">
<img width="140" height="140" src="images/create.png">
</p>
</div>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function TextShow(ID,Btns){
var DivT = document.getElementById(ID);
var Texts = DivT.innerHTML;
var NewT = document.createElement("div");
var Btn = document.getElementById(Btns);

// 判断页面文字
if(Texts.length < 200){
Btn.style.display = "none";
}else{
NewT.innerHTML = Texts.substring(0,200) + "……";
Btn.innerHTML = Texts.length > 200 ? "显示全部" : "";

Btn.onclick = function(){
if(Btn.innerHTML == "显示全部"){
Btn.innerHTML = "收起";
NewT.innerHTML = Texts;
}else{
Btn.innerHTML = "显示全部";
NewT.innerHTML = Texts.substring(0,200) + "……";
}
}
DivT.innerHTML = "";
DivT.appendChild(NewT);
}
}
//文字部分显示:文字、按钮
TextShow("text-mian","Btns");
TextShow("text-mians","Btnss");

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 展示效果
    1. 1.1. HTML
    2. 1.2. JavaScript
,