承蒙以前领导的抬爱，还在兼职做着前端项目，以至于没被代码的浪花完全拍在沙滩上。
严格保密是“外包”人员的基本素养
页面不多。设计的小功能倒是还有几个。。记性真的不行。主要为了提醒我自己
css方面：
1.限制文本行数
一个文本标签里限制最多显示三行的内容，超出用...代替
p {
-webkit-line-clamp: 3; /设置多少行/
-webkit-box-orient: vertical; /必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式/
overflow: hidden; /文本会被修剪，并且剩余的部分不可见/
text-overflow: ellipsis; /显示省略号来代表被修剪的文本/
display: -webkit-box;
}
2.设置滚动条样式
一段文本设置高度加overflow:auto时,当内容超过当前高度就会出现滚动条。但是在手机上的默认显示效果是如果不滑动那里就不会出现滚动条。而现在的需求是不滑动的时候也要显示滚动条的存在
div::-webkit-scrollbar { /* 设置滚动条的bg的样式 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #1e4ea8;
}
div::-webkit-scrollbar:vertical { /* 设置垂直滚动条宽度 */
width: 10px;
}
div::-webkit-scrollbar-thumb { /*设置滚动条里面小块的样式*/
border-radius:5px;
background-color: #4b71b9;
}
补充：滚动条组成：
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
3.设置input框默认字体的颜色
::-webkit-input-placeholder { /* WebKit browsers */
color: #d9d8d8;
font-size: 0.34rem;
}
4.提示我自己：因为全局用的都是rem。遇到的一个问题是三行的文本必须要限制个高度。避免文本字数不一样出现一下一上。遇到的问题是，不同屏幕高度（ipad和ihphne x）的计算不一样。最后调整了行高，行高也用了rem
简洁版
js方面：
总结几个用到的小方法
1.获取当前时间
//方法
function date(){
function getNow(s) {
return s < 10 ? '0' + s: s;
}
var myDate = new Date();
var year=myDate.getFullYear(); //获取当前年
var month=myDate.getMonth()+1; //获取当前月
var date=myDate.getDate(); //获取当前日
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
var now=year+'-'+getNow(month)+"-"+getNow(date)+"
"+getNow(h)+':'+getNow(m)+":"+getNow(s);
return now;
}
//调用 date()
显示
2.获取地址栏url上面的参数
例1：https://www.gaoyue.com/vote/app/13/8
function getUrlParam() { //返回的是8
// 获取参数
var url = window.location.pathname;
var param_arr = url.split("/");
return param_arr[4];
}
例2：https://www.gaoyue.com?bill=8
function getUrlParam(key) {
// 获取参数
var url = window.location.search;
// 正则筛选地址栏
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
// 匹配目标参数
var result = url.substr(1).match(reg);
//返回参数值
return result ? decodeURIComponent(result[2]) : null;
}
getUrlParam(bill) //调用返回8
3.手机获取验证码后的60s倒计时
function settime(countdown) { //countdown为时间，单位s
if (countdown == -1) {
countdown = countdown;
//此处要清空图片验证码的input的value值
return;
} else {
downobj.html(countdown + "s重新获取");
countdown--;
}
setTimeout(function() {
settime(obj,downobj,countdown) }
,1000)
}
4.ajax数据交互示例
$('#entry-btn').click(function(){ //发布评论按钮
var com_value = $('#entry-kuang').val(); //评论内容
var time = date(); //系统当前时间
var name = '热心网友';
var itemDom = $('#vote-item').find('li'); //项目id
var itemId = [];
for(var i=0; i 0){ //判断输入框不能为空
$.ajax({
url:"/vote/add-comment",
type:"POST",
data:{
"bill_id":billId,
"content":com_value,
},
dataType:"json",
success: function(result){
if(result.code == "10000"){
//评论成功执行的操作
alert('感谢您的评论，我们会尽快审核。');
$('#entry-kuang').val('');
}
}
})
} else {
alert('评论内容不能为空');
}
})
5.提示我自己
需求：当滚动条滚动到一定的高度，菜单栏一直固定在屏幕上端。实现很轻松，但是固定和不固定切换的时候，页面主体内容会跳一下。原因是，菜单栏所占的高度在fixed定位时一下消失了，上面的内容就自动的补齐到上面，视觉上会跳一下。解决方法：获取菜单栏的高度，当fixed时候，把主体内容加一个padding-top等于菜单栏的高度
6.封装一个随时可用的cookie，比如保留24小时的cookie（以下这段内容来自互联网，作者是谁真的忘了，不好意思）
//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。
function setCookie(name,value,hours,path){
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + hours*3600000);
path = path == "" ? "" : ";path=" + path;
_expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
}
//获取cookie值 方法
function getCookieValue(name){
var name = escape(name);
//读cookie属性，这将返回文档的所有cookie
var allcookies = document.cookie;
//查找名为name的cookie的开始位置
name += "=";
var pos = allcookies.indexOf(name);
//如果找到了具有该名字的cookie，那么提取并使用它的值
if (pos != -1){ //如果pos值为-1则说明搜索"version="失败
var start = pos + name.length; //cookie值开始的位置
var end = allcookies.indexOf(";",start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie
var value = allcookies.substring(start,end); //提取cookie的值
return unescape(value); //对它解码
}
else return ""; //搜索失败，返回空字符串
}
//把用户手机号存入一个Cookie
setCookie('iphoneNum', 13178957841, 720, '/');
//判断24小时内是否验证过
var useriphone = getCookieValue("iphoneNum"); //获取cookie保存的手机号
if (useriphone != ' ' ) {
//说明13178957841这个用户720内登陆过
}