前后端项目考核周---啊啊啊，崩溃了

经过长达一月的惊涛洗礼，终于迎来了最后的考核，在最后一天面对n+1个问题时，我们也逐渐乱了阵脚，我们都希望自己的页面再项目上大方光彩，但到最后却发现连页面最基本的跳转都费劲的时候就感觉到无力回天，在考核的今天偏又下了点小雨，真时屋漏偏逢连夜雨，给本就不美好的心情雪上加霜。。。。

但还是到了写博客的时候，今天的写的博客时关于本次页面项目时发现的问题和解决方法

		.text{
			border: 2px cadetblue solid;
			width:300px;
			margin: 0 auto;
		}
		<div class="text">
心理健康是一个人整体健康中不可或缺的一部分。与普通疾病不同，心理疾病往往所带来的痛苦会持续的时间更长，甚至长达一生，就比如当代网友的那句“幸福的童年可以治愈一生，而不幸的童年需要一生来治愈”。但好在近些年来，越来越多的人开始重视心理健康，并采取措施来提高自己的心理健康水平。然而，心理健康问题仍然在社会中存在，并且需要更多的关注和理解。我们需要在注重自身心理健康发展的同时去关注社会上的心理健康问题。拿破仑曾言：“一个人是否成功，关键取决于他的心理。成功与失败的分水岭往往就是按心理划分的。”保持良好的心理是大学生掌握文化科学知识的重要保证，有了健康的心态和体魄，不仅能取得好的学习效果，而且有益于终身的发展。那么，作为大学生的我们，应该如何消除心理差距，保持并维护自身心理健康第一,树立正确人生观和世界观树立正确的人生观、世界观有利于大学生确定积极的人生目标，积极的人生目标往往能提高大学生承受压力与挫折的能力，保持积极乐观的精神，并使大学生懂得生命存在的意义。树立正确人生观和世界观有助于大学生科学地认识社会，对人生采取适当的态度和行为，并正确体察和分析客观事物，做到冷静而稳妥地处理各种事情。树立正确人生观有益与塑造健康的人格。具有正确的人生观和世界观的大学生能敏锐的而客观地认识世界，在工作中富有创新和开头精神，敢于并乐于把爱慷慨地献给他人与社会。
		</div>

效果图

 但此时文本的内容过于多，不方便用户阅读体验，所以我们要给我们的文本进行省略

设置文本样式  
-webkit-box-orient: vertical;
//设置文本在第几行省略
  -webkit-line-clamp: 3;
  display: -webkit-box;
//当文本过多时将过多的文本省略
      overflow: hidden;
//在文本的最后添加省略号
   text-overflow: ellipsis;

当我们为文本设置这些属性时文本就省略的就剩三行了，但当我们想显示文本时就需要为文本添加一个按钮，当点击按钮时文本就显示全部，并且按钮消失,为文本设置底部文字，点击展示全部，再次点击收回。

//为按钮绑定点击事件
1.button
const btn = document.querySelector('button')
const text = document.querySelector('.text')
btn.onclick = function(){
    text.style.display = 'block';
    btn.style.display = 'none';
}
//将按钮变成查看更多内容
2.txt<查看更多>将文字设置在盒子底部bottom = 0;
let txtnum = 1;
txt.onclick = function{
if(txtnum==1){

text.style.display = 'block';
txt.style.color = 'blue';
txt.innerHTML = '收起';
txtnum = 0
}else if(txtnum==0){
text.style.display = 'block';
txt.innerHTML = '收起';
txt.style.color = 'green';
}
}

这就是本次的全部内容了，再下一周的学习中，我的学习计划是更正当前项目的不足，找到自己的缺点，再本次考核中找到自己与别人的差距，并在后面的学习中减少它，更详细的学习计划是：

1.了解更多关于JS高级的知识，能够将JS精准无误的运用到自己的页面上去

2.学习有关CSS伪类的知识，最近再写项目的时候发现CSS的伪类可以增加好多增加好看的样式；

3.学习更多的算法，了解算法学习思路。

前端学习的第12周