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

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

0

4个回答

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

希望采纳!

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

0
xl1090453281
xl1090453281 回复lllomh: 好的!
3 个月之前 回复
lllomh
lllomh 回复xl1090453281: 顺便去博文留个评论踩一踩啊 ^^
3 个月之前 回复
lllomh
lllomh 回复xl1090453281: 哈哈,那就关注我一下呗,为了你这个因为太长,外链接多,我还被封号了,还跟客服扯了好久。
3 个月之前 回复
xl1090453281
xl1090453281 真的十分感谢!!!!
3 个月之前 回复
0
xl1090453281
xl1090453281 插件我找到了但是不会判断星座和生肖
3 个月之前 回复
0
xl1090453281
xl1090453281 插件我找到了但是不会判断星座和生肖
3 个月之前 回复
<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>
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
手把手教你写Js日期时间选择器(3)-让控件滑动起来
本节为大家讲解怎么让控件滑动起来,这里需要用到一个第三方库IScroll.js.先奉上链接地址:IScroll githubIScroll 网站IScroll介绍IScroll是一个高性能,体积小,无依赖性,多平台的一个javascript滑动器.和Android里面的差不多. IScroll不只有滑动功能,还有缩放,平移等功能,具体看文档撒. IScroll的动画效果也有很多bounce, e
实现类似闹钟时间选择的时间选择器
时间选择器大多是年月日那种三级联动的,今天实现了一个小小的区别三级联动的时间选择器,
Web滑动日期选择器(仿iOS)
datepicker.mobile移动web端统一使用体验,在ios上通过select标签滑轮的效果很赞,但是android不同版本表现各异,为了统一UI与使用体验,使用开源库mobiscroll封装了一个自己的时间选择控件(mobiscroll库的使用文档不多,自己使用时也遇到很多坑),实现js比较简单,大家可以看看,然后定制出自己的时间选择器。
可上下滚动的单选列表,自动固定位置(形如手机端的时间选择器)
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt; &amp;lt;meta http-equiv=&quo
组装原有控件实现横向滚动的时间选择器,可滑动 点击,初始状态在指定位置
前段时间,产品设计了一个横向的滚动的时间选择器,由于工作很急,也没时间来自定义view,而且目前开发的项目很老了,不支持V7的包,所以我不能用recyclerview。 我就将就之前的GridView和HorizontalScrollView,组装了一哈就可以了。本来想在网上找一个,都没有找到合适的。最后就自己写的。代码有点粗糙,有些地方没有优化, 比如:日期筛选那里用for循环获取了很多日历的对象。如果有时间,我会再优化一哈。不用说了直接上代码。 代码很简单,我就不注释了。
时间选择器
一个自定义的时间选择器,逻辑并不复杂,涉及到两个RecyclerView的交互还有Calendar时间类的使用,今天从项目中剥离出来,供大家参考指正。 效果如图: 效果如上图所示,大致实现方式就是上下两个RecyclerView分别实现日期和时间的选择,然后以底部弹窗的方式展示出来,废话不多说,上代码。 /** * Created by YHang on 18/5/28. */ pu...
手机移动端横向日期选择器实现思路
在最近的H5开发工作中,遇到一个横向滑动选择日期的需求,年月修改方式不限,日期为滑动,横向标注星期,每次滑动一周,下面为大家介绍一下我的一个实现思路,有更好的方案欢迎留言。
Android 滚动时间选择器
这是效果图,有需要可以下载。 http://download.csdn.net/download/sky_castle/10012564
vue滑动选择器(一键开启时间选择器)
vue滑动选择器(一键开启时间选择器) 直接上demo npm i time_check_jiangji 之后直接用 &lt;template&gt; &lt;div class="A"&gt; &lt;div @click="showFn"&gt;开&lt;/div&gt; &lt;Time v-if="show" :arr="arr" :value="value" @cli...
手把手教你写Js日期时间选择器(1)-基本结构
最近研究了一下js的日期时间选择器;但是网上资料比较少,所以准备写一系列的文章记录一下;给大家提供思路.项目github链接先上最终效果图:这一节为大家分析一下控件的基本布局结构.基本结构首先分析一下选择器的布局结构.如上图所示: 1. 中间的选中区域由是一个div,加上上边框和下边框; 2. 选择列表区域是一个ul列表; 3. 最外层由一个div包裹中间的内容.下一节
js 时间选择器 日期选择器
js 时间选择器 js 时间选择器 js 时间选择器日期选择器
android滚轮时间选择器
仿ios时间选择器,实现滚动选择时间日期
安卓 使用TimePicker进行时间选择器 定闹钟一类时间滚动选定 (21)
在闹钟里面,我们都会看到一个时分滚动的条,里面可以选择24小时里面各个时间,这里用TimePicker可以实现一个时分的时间选择器。首先写一个布局放入两种TimePicker:&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/re...
滚动选择器PickerView使用demo
与此资源对应的博客地址:http://blog.csdn.net/zhongkejingwang/article/details/38513301
vue 日期组件 滚动选择-非翻页--vue.js
地址: https://github.com/DaveyDai/vue-scrolldatepricker npm install npm run dev App.vue 中有调用示例~ 兼容同时多种选择 喜欢就给个星星~~3q~
使用UGUI实现滚轮时间选择器
支持无限滑动,自定义年份开始时间和数量,根据月份判定该月的天数(闰年二月好像不太行,需要自己改下),良心推荐,不能用你打我 下载地址:链接: https://pan.baidu.com/s/1TtYiqdB5Fndtvx7atqQb1Q 提取码: g26c ...
android滚轮,可实现日期,文字,时间滚动选择
android滚轮,可实现日期,文字,时间滚动选择
滚轮效果View的日期选择器和时间选择器和对话框
滚轮效果View的日期选择器和时间选择器和对话框由于之前需要使用滚轮效果的时间View,摸索一一段时间自己封装了一个,应该对大家都是有点帮助的。 原本我是在一个多选菜单中筛选时间的,对话框肯定是有点突兀了,因为其他几个条件都是在下面出现的,时间也是要那种效果。 筛选框如下: 时间的筛选显示也要上面的效果。 筛选框架的使用,之气已经写过了: http://blog.csdn.net/wenz
wheelview--滚动效果的日期选择器View
wheelview滚动效果的View这段时间需要用到一个时间选择器,但是不能使用日期对话框, 因为它是筛选条件框架下的,只能是View!这个WheelView改造后可以达到要求!这个wheelview框架使用的类不多,就几个,还有一些资源文件。 我根据这个框架设计了日期的选择器。主页面:第一种日期选择器页面:动态效果:使用:具体的实现是一个LoopView的类,这是一个继承View的类!
横向滑动时间选择器
横向滑动,可自定义View布局,时间选择器
原生js实现的日期选择插件
       最近公司项目告一段落,想着写个小玩意打发下上班时间,就用js很粗糙的实现了下日期选择插件。间间断断历时1天多,实现了选择日期的功能,从写完的整体代码来看,耦合度还是蛮高的,我觉得还是我对js中的原型继承方式理解不深刻,一定有更优雅的方式再优化下这份粗糙的代码,各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方,有批评指正让我有动力继续写博客嘛!        先说下这个...
android 有时间限制的时间选择器Dialog
android 有时间限制的时间选择器Dialog
第三方简单实现时间选择器
嘿嘿,附上github地址,上面很详细。 https://github.com/Bigkoo/Android-PickerView 导入包后 如果是选择时间的如下: TimePickerView timePickerBuilder=new TimePickerBuilder(Main2Activity.this, new OnTimeSelectListener() { ...
手把手教你写Js日期时间选择器(2)-样式实现
日期时间选择器样式实现. 准备工作 代码实现.
JavaScript 实现上下循环滚动
实现一个图片或者div在屏幕的上下间循环滚动 实现原理:通过获取当前位置距离页面浏览器可见区域的距离来执行往上还是往下的操作。 实现步骤 1、获取当前浏览器的可见区域的高度 var vh=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; funct...
滑动选择的日期选择器,选中部分显示年月日
滑动控件来自http://blog.csdn.net/u011546655/article/details/45921025 万分感谢博主分享再此基础上微改了控件代码,实现选中的中间部分显示年月日说几点控件中MARGIN_ALPHA属性越大行间距就越大在onMeasure中修改两个浮点值,可以调节文字大小修改这两个地方应该满足大部分需求追踪数据源测试后发现在drawData方法中canvas.dr...
Android自定义滚动式时间选择器(在他人基础上修改)Demo
参考其它博主的自定义控件而改动的时间选择控件,博客地址:http://blog.csdn.net/lindroid20/article/details/72723061
DatePicker:日期滚动选择
日期滚动选择(使用DatePicker实现)
【QT】自制控件---滚动选择器
因为我需要有连续的数字以供选择,所以只记了数字范围。如有需求可以改为用任意线性容器保持数据 代码: self-contained.h #ifndef SELFCONTAINED_H #define SELFCONTAINED_H #include #include #include #include #endif // SELFCONTAINED_H rolli
vue 手写一个时间选择器
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件。 原理 DatePicker 的原理是——计算日历面板中当月或选中月份的总天数及前后月份相近的日子,根据点击事件计算日历面板显示内容,以及将所选值赋值给&lt;input/&gt;标签。 实现 CSS 代码于文章末尾处 1. 构思页...
Unity3D UGUI制作滚动日期选择
首先是新建一个ScrollView 设置如图 然后直接新建脚本 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; /// /// 脚本挂在ScrollView上 /
Unity滚轮时间选择器(带场景示例)
支持无限滑动,自定义年份开始时间和数量,根据年份自动判定2月的天数,根据月份判定该月的天数,良心推荐,不能用你打我
js 前端时间选择器
&amp;lt;div class=&quot;bname fl&quot;&amp;gt; 创建时间: &amp;lt;br&amp;gt; &amp;lt;input type=&quot;date&quot; id=&quot;startCreatetime&quot; max=&quot;&quot;&amp;gt; - &amp;lt;input type=&quot;date&quot; id=&quot;endCreatet
滚动时间横向显示
&amp;lt;!doctype html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;&amp;lt;title&amp;gt;滚动时间显示&amp;lt;/title&amp;gt;&amp;lt;script src=&quot;http://libs.baidu.com/jquery/1.3.2/jquery.min.js&quot;&amp;gt;&amp;
滚轮效果View的日期选择器和时间选择器和对话框(eclipse和Android studio两个版本)
滚轮效果View的日期选择器和时间选择器和对话框
H5万能选择器:iosselect
移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示。
js图片轮播
动态js实现图滚动,动态js实现图滚动动态js实现图滚动动态js实现图滚动动态js实现图滚动动态js实现图滚动动态js实现图滚动动态js实现图滚动动态js实现图滚动
JS日期选择器(使用测试:兼容IE,Firefox,Opera等浏览器)
JavaScript日期选择器(兼容IE,Firefox,Opera等主流浏览器)内含使用教程,缩略图!
Android 滚动时间选择器,爱上租时间选择器
Android 滚动时间选择器,爱上租时间选择器,这个是高仿爱上租时间选择器。
仿Iphone实现滑动选择器
用于用户滑动,选择,可以用于下拉列框,炫酷选择。

相似问题

4
javascript如何用数组实现冒泡排序的算法,不用sort函数怎么实现?
6
javascript中怎么实现求一个数组的中位数,求中位数的方式怎么实现的呢?
2
javascript怎么实现判断页面上的链接的功能,判断链接怎么用js语言实现呢?
9
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
3
javascript怎么实现对文本框的判断,在执行以后怎么判断一下,代码的实现怎么写?
7
javascript简单的问题,想要c币的都来回答:怎么在js网页中实现
2
javascript怎么实现网站的判断的功能,拿到一个界面以后如何返回判断界面的做法?
1
javascript怎么实现对onekey ghos的调用。而且需要制定分区的参数,怎么设置?
2
请问怎么利用javascript实现电子计算机远程开机和关机的功能?定时开机怎么实现?
1
javascript怎么实现判断用户的计算机是否已经处于开机的状态了呢?如何判断状态?
2
javascript怎么实现调用api的功能,api调用功能的语句的格式是怎么样的?
2
javascript怎么实现箭头的界面,不是实现箭头函数,而是桃宝那种状态箭头?
1
javascript怎么实现对多个html+div实现的css的界面先判断后显示?
1
javascript怎么实现蒙特卡洛法计算圆周率的值?
0
javascript+unifia.js+ome怎么实现国标3码的过滤?
0
javascript怎么实现读取windows xp的电脑cdkey的功能?
4
C# js实现获取本地时间(不是服务器的时间)
0
swiper.js如何实现从上往下自动滚动啊?
1
javascript 怎么实现远程联机
0
js怎么实现页面数据排序 要求table里的第一列不参加排序??