1一个日历插件
代码格式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{margin: 200px auto; 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{ 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%); }