xl1090453281
xl1090453281
采纳率93.8%
2019-05-29 17:45 阅读 2.6k

js怎么实现滚动的时间选择器?

5

如图。请问这种可以滚动选择的时间选择怎么实现呀,还有怎么取到选好的时间值判断他的星座和生肖呀,麻烦各位大佬上一下代码,十分感谢!图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    lllomh lllomh 2019-05-30 19:09

    你好,用心一天时间 给你解答的。基于http://www.jq22.com/jquery-info10900 给你修改的,星座已经加上。这里不能传文件,我就全部加在一个 index文件里了,然而这里字符有限制,不能放么多,我就写在博客面了,专门为你这个回答写的。根据时间告诉星座!你直接复制过去就可以运行了。

    希望采纳!

    请移步:
    Mobiscroll插件-根据时间选择弹出星座
    https://blog.csdn.net/lllomh/article/details/90703262

    点赞 评论 复制链接分享
  • as_csdn 代码的灵魂是bug! 2019-05-29 17:56
    点赞 评论 复制链接分享
  • jslang 天际的海浪 2019-05-29 18:26
  • qq_24581629 qq_24581629 2019-05-30 18:04
    <script type="text/javascript">
    /* 生效的实现参考星座 */
    // 星座对应的月份(自行百度)
    var constellation = [
        {start: '1-21', end: '2-20', cst: '星座1'},
        {start: '2-21', end: '3-20', cst: '星座2'},
        {start: '3-21', end: '4-20', cst: '星座3'},
        {start: '4-21', end: '5-20', cst: '星座4'},
        {start: '5-21', end: '6-20', cst: '星座5'},
        {start: '6-21', end: '7-20', cst: '星座6'},
        {start: '7-21', end: '8-20', cst: '星座7'},
        {start: '8-21', end: '9-20', cst: '星座8'},
        {start: '9-21', end: '10-20', cst: '星座9'},
        {start: '10-21', end: '11-20', cst: '星座10'},
        {start: '11-21', end: '12-20', cst: '星座11'},
        {start: '12-21', end: '1-20', cst: '星座12'},
    ]
    
    $(function(){
        // juqery日期选择插件
        $('#beginTime').date(null, function(data) {
            // data:选中的日期
            console.log(data)
            var year = data.split('-')[0]
            var selectDate = new Date(data)
            var curCst = constellation.find((item) => {
                var start = new Date(year + '-' + item.start)
                var end = new Date(year + '-' + item.end)
                return start <= selectDate && end >= selectDate
            }) || constellation[11]
            // curCst: 选中的日期对应的星座
            console.log(curCst)
        });
    
        $('#endTime').date({theme:"datetime"});
    
    });
    
    
    </script>
    
    点赞 评论 复制链接分享

相关推荐