H5 移动端 时间选择器

原创 2016年08月30日 16:42:55

本选择器,自己填充内容(li的文本),只是做了一个大概的样式,其它的有需要者自己去改


<html>

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript" src="zepto.js"></script>

<style type="text/css">
.pic{
 margin: auto;  
  position: absolute;  
  top: 0; bottom: 0; right: 0;  
}


.date_picker{
width:90%;
margin:0 auto;
border:1px solid #ccc;
min-height:245px;
background:#jjj;
position:relative;
}




.date_picker_title{
width:100%;
height:80px;
line-height:80px;
border-bottom:1px solid #ccc;
text-align:center;
margin-bottom:5px;
}


ul{
list-style:none;
margin:0;
padding:0;
}
ul li{
width:100%;
height:60px;
line-height:60px;
border-bottom:1px solid #ccc;
text-align:center;
}
.date_picker .on{
background:#aaa;
}




#date_list{
height:183px;
overflow:auto;
}




</style>
</head>


<body>
<div class="filter">




</div>




<div class="date_picker"  >
<div class="date_picker_title" >时间选择器</div>
<div id="date_list">
<ul>
    <li></li>


<li class="on">8-30</li>
    <li>9-1</li>
    <li>9-2</li>
    <li>9-3</li>
    <li>9-4</li>
    <li>9-5</li>
    <li>9-6</li>
    <li></li>


</ul>
</div>


</div>




</body>
</html>
<script>
window.onload=function(){
var myScroll;
var liHeight=$("#date_list ul li").height();
var currentLI=0;
var a=0;
function loaded () {
myScroll = new IScroll('#date_list', { mouseWheel: true });

myScroll.on('scrollStart', function () {
$("#date_list ul li").removeClass("on");


});

myScroll.on('scrollEnd', function () {
//alert("scroll end!!")
a=Math.round(Math.abs(this.y)/liHeight)+1

$("#date_list ul li").eq(a).addClass("on");

console.log("a=", a);
currentLI= parseInt(((this.y*-1)-(61*2))/liHeight)+1;
console.log("currentLI="+currentLI);

myScroll.scrollTo(0, -1*(a-1)*61, IScroll.utils.ease.elastic);


console.log($("#date_list ul li[class='on']").html())


if ( this.x < -1000 ) {
// do something

}
});

  }




document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);





loaded();


}






</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5新控件 - 日期和时间选择输入

HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。 注意:目前只有Chrome和Opera提供下拉式日历支持,其它浏览器仍是一个普通文本框。1,日期...
  • u014063717
  • u014063717
  • 2016年03月17日 15:51
  • 93959

H5日期选择控件demo

  • 2017年09月14日 14:57
  • 53KB
  • 下载

前端开发之日期控件、HTML5日期输入类型(date)

在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站。 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是...
  • chenchaofuck1
  • chenchaofuck1
  • 2016年06月26日 21:20
  • 40446

H5选择器

选择器:基本选择器、层次选择器、属性选择器、结构伪类选择器、文本新增伪类选择器; 1.层次选择器: 1).后代选择器:A   B-------------找到A里面的所有B元素(子孙后代)...
  • yioman
  • yioman
  • 2016年11月16日 11:55
  • 775

H5移动端出生日期插件

现在需要在微信公众号H5页面添加出生日期,如果直接用电脑版的出生日期插件,会显得很土,而且不好用。在网上找了些资料写了个demo,把demo分享给大家。具体效果截图如下: 实现代码如下:...
  • zl544434558
  • zl544434558
  • 2015年11月27日 16:59
  • 7534

jQuery手机移动端日历日期选择

从jQuery中找到了一个不错的框架,可以介绍给大家,代码就直接粘贴了,不用下载了!~ ! html代码: jQuery手机移动端日历日期选择 $(...
  • xy_peng
  • xy_peng
  • 2016年12月05日 15:53
  • 6018

手机触摸板 日期选择控件整理

1:首先引用js文件:
  • make1828
  • make1828
  • 2014年10月22日 15:19
  • 12327

手机上的出生日期插件

  • 2015年11月27日 16:46
  • 53KB
  • 下载

手机移动端横向日期选择器实现思路

在最近的H5开发工作中,遇到一个横向滑动选择日期的需求,年月修改方式不限,日期为滑动,横向标注星期,每次滑动一周,下面为大家介绍一下我的一个实现思路,有更好的方案欢迎留言。...
  • u010035608
  • u010035608
  • 2017年03月31日 09:34
  • 992

移动端时间选择器

LazyPicker
  • sinat_24496253
  • sinat_24496253
  • 2016年12月30日 16:46
  • 304
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5 移动端 时间选择器
举报原因:
原因补充:

(最多只允许输入30个字)