总结个人在实际工作中碰到的一些代码片段问题，不断更新......
获取时间的各种函数
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
滚到底部
css代码不多说了。主要说下js代码，判断页面是否到了底部的条件，滚动的高度+当前可视区域的高度=页面的总高度，有点抽象，我搜了一张图
scrollTop为滚动条在Y轴上的滚动距离
clientHeight为内容可视区域的高度
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离
scrollTop+cilentHeight ==scrollHeight
这是我用jq写的代码，已经放在实际的项目当中
js的写法
js的写法，亲测有效
css判断超过多行显示省略号
但是这个只有-webkit的浏览器支持
可能有些人会问-webkit-box-orient：vertical和-webkit-line-clamp：2是什么意思，之前我也很少接触到。-webkit-box-orient是伸缩盒器，而-webkit-line-clamp限制块状元素的显示文本行数
由于这种写法不支持火狐和IE，所以换了一种写法
bootstarp常用效果
bootstarp3的这种效果经常出现，常用在导航条的输入框
记住记住啊，下次就不用看bootstarp文档了
angluarJS轻松实现面板切换效果
使用angluarJS轻松实现面板切换的效果，注意在body后面加上ng-app=" "
对于表格的纵横向内容过多，要出现滚动条
解决办法
选择大于n的元素$(selected).(li:gt(n))
选择第n个的元素$(selected).(li:nth(n))
雪碧图（css sprite）
雪碧图工具，下面是代码。主要是用到background-position这个属性
移到实际代码里，给每个icon一个class属性即可
三角形
transform和transition效果的理论知识
Css3的变换transform和过渡效果transition
transform：skew（倾斜）、scale（缩放）、translate（变换）、rotate（旋转）
transition:property duration timing-function delay;
/*property：执行过渡的属性 :none/all所有属性都将过渡/property 定义过渡效果的css属性名列表
duration：执行过渡的持续时间:
timing-function：执行过渡的速率模式
ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
delay：延时多久执行*/
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
transform-origin：设置旋转元素的起始位置
侧边栏的显示与隐藏
就是点击侧边的那个三角形，显示和隐藏侧边栏
主要核心jq代码
$("div.togglebtn").click(function(){
if($("div.togglebtn i").hasClass("fa fa-caret-left")){
$(".side_navbar").fadeIn(1000).hide();
$("div.togglebtn").find("i").attr("class","fa fa-caret-right");
$(".main_content").css("width","1200px");
}
else{
$(".side_navbar").fadeOut(1000).show();
$("div.togglebtn").find("i").attr("class","fa fa-caret-left");
$(".main_content").css("width","900px");
}
})
显示与隐藏
效果图
$(function() {
$(".tabledetails").hide();
$("a.togglebtn").on("click",function() {
if($(this).parent().parent().next().is(":hidden")) {
$(this).parent().parent().next().slideDown().show();
$(this).html("隐藏装载明细");
}else{
$(this).parent().parent().next().slideUp().hide();
$(this).html("显示装载明细");
}
/*$(".table1>tbody>tr").nextSibling().show();*/
});
背景图片兼容低版本浏览器
关于表格的增加（复制两行）以及解决新增表格单击事件失效的问题
如图，这里是表格的两行，即两个tr
html结构，可以看到是两行tr,就是说下面的tr是明细表默认是隐藏的
现在要求点击增加车辆的按钮，下面的两行tr复制出来添加到table后面。这里有两个问题要解决
1、点击增加车辆的按钮一次性增加两行
2、新增的两行点击事件失效
在点击事件那里用on事件去绑定
最终解决
点击单选按钮时进行tab页的切换
$(":radio[name='enterpriseBtn']").click(function(){
//获取下标值
var_index = $(":radio[name='enterpriseBtn']").index($(this));
alert(_index);
$(".enterprisedata").find(".form-group").eq(_index).show().siblings().hide();
});
如何遍历单选框的值
$(function(){
$(".save").on("click",function(){
//第一种获取单选框的值
/* $("input[name='aa']").each(function(radio){
alert($(this).val());
})*/
//第二种获取单选框的值
/* $("input:radio").each(function(radion){
alert($(this).val());
})*/
//第三种获取单选框的值
$("input[type='radio']").each(function(radio){
console.log($(this).val());
})
})
})
网友评论