元旦活动页面总结
1一个日历插件
代码格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{margin: 200px auto;width: 500px;}
</style>
<link rel="stylesheet" href="css/mobiscroll.2.13.2.css" />
<script src="js/jquery-3.0.0.js"></script>
<script type="text/javascript" src="js/mobiscroll.2.13.2.js" ></script>
</head>
<body>
<div class="box">
<input type="text" name="one" id="one" value="2016-01-02" />
<input type="text" name="one" id="two" value="2016-01-02" />
</div>
</body>
</html>
<script>
$(function () {
$("#one").mobiscroll().date({
theme: "android-ics light",
lang: "zh",
startYear:2015,
cancelText: null,
dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
// wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
//onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('-');
return array[0] + "年" + array[1] + "月" +array[2] + "日";
}
});
$("#two").mobiscroll().date({
theme: "android-ics light",
lang: "zh",
startYear:2015,
cancelText: null,
dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
// wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
//onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('-');
return array[0] + "年" + array[1] + "月" +array[2] + "日";
}
});
});
</script>
2、获取一个元素的高度：height（）;innerHeight();outerHeight();
3、获取一个元素定位后 距离顶部的距离:$('.ele').positiong().top;
4、背景渐变
#box{ width: 600px; height: 300px; background: linear-gradient(125deg ,rgb(35, 207, 252) 20%,rgb(135, 107, 152) 40%, rgb(195, 105, 199) 60%,rgb(15, 205, 99) 80%, rgb(225, 175, 19) 100%); }
