您的当前位置:首页正文

jQuery带时间的日期控件代码分享_jquery

2023-12-05 来源:站点网
导读如下:一、引入jquery二、HTML代码三、js代码1)引入js代码2)下面是完整的js代码
本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效。分享给大家供大家参考。具体如下:带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟。 运行效果图: -------------------查看效果 下载源码-------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。为大家分享的jQuery带时间的日期控件代码如下

jQuery带时间的日期控件代码

运行效果:

实例小结:

1、注意js文件引用,要在head中声明,在body中展开时,无需重新申明引用信息等;
2、注意Date有关函数,获取时候不要忘记了get和括号;
3、注意window.onload = function(){}的写法;
4、月份要注意数组开始顺序,从一月份开始,下标是0,以此类增;
5、注意时、分、秒函数为复数;
6、day表示获取星期几,但是获取的是数字,可以用数组转换(0表示周日,其它一一对应)
7、setTimeout函数:setTimeOut(A,B),注意setTimeout中out为小写
A:函数体 B:函数执行间隔
8、setTimeout执行过程中,不要使用document.write,否则递归调用未实现;
9、JQuery选择器中使用单引号还是双引号?
理论上单双都可以,在嵌套情况下视具体情况而定。
10、关于jQuery获取标签文本内容:方法1:text();方法2:html();
注意,需要改变文本内容时,正确格式为:$('#time').text("content") 错误格式为:$('#time').text() = "content"

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

怎样操作Angular5路由传参

如何操作vue2.0+从插件开发到npm发布

怎样操作vscode内使用.vue代码

如何用jquery实现时钟效果

这次给大家带来如何操作jQuery实现电子时钟效果,操作jQuery实现电子时钟效果的注意事项有哪些,下面就是实战案例,一起来看一下。

<!DOCTYPE html><html> <head> <title>jQuery电子时钟</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <span id="time">haha</span> <script type="text/javascript"> window.onload = function(){ showTime(); } function showTime(){ var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth() + 1; var date = myDate.getDate(); var dayArray = new Array(7); dayArray[0] = "星期日"; dayArray[1] = "星期一"; dayArray[2] = "星期二"; dayArray[3] = "星期三"; dayArray[4] = "星期四"; dayArray[5] = "星期五"; dayArray[6] = "星期六"; var day1 = myDate.getDay(); var day = dayArray[day1]; var hour = myDate.getHours(); var minute = myDate.getMinutes(); var second = myDate.getSeconds(); var min = checkTime(minute); var sec = checkTime(second); var time1 = year + "年" + month + "月" + date + "日"; var time2 = hour + ":" + min + ":" + sec; // document.write(time1+day+time2); //用js方法 // document.getElementById("time").innerHTML = time1+day+time2; //用jquery方法 $('#time').text(time1+day+time2); setTimeout("showTime()",500); } function checkTime(i){ if(i<10){ i = "0" + i; } return i; } </script> </body></html>

运行效果:

实例小结:

1、注意js文件引用,要在head中声明,在body中展开时,无需重新申明引用信息等;
2、注意Date有关函数,获取时候不要忘记了get和括号;
3、注意window.onload = function(){}的写法;
4、月份要注意数组开始顺序,从一月份开始,下标是0,以此类增;
5、注意时、分、秒函数为复数;
6、day表示获取星期几,但是获取的是数字,可以用数组转换(0表示周日,其它一一对应)
7、setTimeout函数:setTimeOut(A,B),注意setTimeout中out为小写
A:函数体 B:函数执行间隔
8、setTimeout执行过程中,不要使用document.write,否则递归调用未实现;
9、JQuery选择器中使用单引号还是双引号?
理论上单双都可以,在嵌套情况下视具体情况而定。
10、关于jQuery获取标签文本内容:方法1:text();方法2:html();
注意,需要改变文本内容时,正确格式为:$('#time').text("content") 错误格式为:$('#time').text() = "content"

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

怎样操作Angular5路由传参

如何操作vue2.0+从插件开发到npm发布

怎样操作vscode内使用.vue代码

如何用jquery插件实现生日日期选择

属性、用法介绍

1.调用方法

2.maxAge : 设置“年”下拉表中年的个数,这里设置为10则显示最近10年的(前提是你开始“年”必须为今年2013),默认值为120。

3.minAge : 与maxAge相对,如果当前年为2013年,并且设置了minAge为20,那么最早可以选择的年限为1993年。

4.maxYear : 年列表中最大年,你可用一个具体年如,'2013-07-06'或者采用变量获取当前年的字符串。

默认值为todayYear(算法:todayDate = new Date(), todayYear = todayDate.getFullYear())

5.futureDates : 将来(未来)时间是否可以选择,例如:你在maxYear设置为'2020',并且futureDates为true,此时列表内容为:

6.futureDates为false时:

7.dateFormat:在这里format指的是显示年月日的顺序,bigEndian: “年月日” ,littleEndian:“日月年”,否则 “月日年”

8.monthFormat:其实没有什么大用途,之前因为是英文版本的,short为英文版单词缩写。

9.placeholder: 是否显示默认提示的信息。

10.defaultDate : 元素初始时的值

11.hiddenDate:是否要添加一个时间隐藏域,值为true或false 默认为true

fieldName:隐藏域元素的name值 默认为:birthdate

fieldId:隐藏域元素的id值 默认为:birthdate

12.wraper:为盛放select元素的容器,这个是我自己扩展的,原来插件只支持fieldset,修改后可以有多种方式选择。效果如下:

"wraper":"span"

13.legend:fieldset下元素属性

JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

<input id="db"/>

<script>

$(function () {

$('#db').datebox({

onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层

span.trigger('click'); //触发click事件弹出月份层

if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的事件触发和对象生成有时间间隔

tds = p.find('div.calendar-menu-month-inner td');

tds.click(function (e) {

e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件

var year = /\d{4}/.exec(span.html())[0]//得到年份

, month = parseInt($(this).attr('abbr'), 10) + 1; //月份

$('#db').datebox('hidePanel')//隐藏日期对象

.datebox('setValue', year + '-' + month); //设置日期的值

});

}, 0)

},

parser: function (s) {//配置parser,返回选择的日期

if (!s) return new Date();

var arr = s.split('-');

return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);

},

formatter: function (d) { return d.getFullYear() + '-' + d.getMonth(); }//配置formatter,只返回年月

});

var p = $('#db').datebox('panel'), //日期选择对象

tds = false, //日期选择对象中月份

span = p.find('span.calendar-text'); //显示月份层的触发控件

});

</script>

easyui 1.4.1开发,实现楼主的效果

站点网还为您提供以下相关内容希望对您有帮助:

如何用jquery在页面显示时间

如下:一、引入jquery 二、HTML代码 三、js代码 1)引入js代码 2)下面是完整的js代码

如何在jqGrid中使用输入type ='date'作为日期列

1.在定义列时在editoptions的dataInit写一个function,好处是不管是添加还是修改时都能显示日历控件,如下 {name:'dt',index:'dt',editable:true,editoptions:{ dataInit:function(el){ (el).click(function(){ WdatePicker...

jquery的日期控件,怎么样让结束时间大于开始时间

jQuery('#holderCertiValidityDate').datepicker({ changeMonth: true,changeYear: true,showOn: 'button',buttonImage: 'images/date.gif',buttonImageOnly: true,buttonText: '选择日期',dayNamesMin: ['日', '一', ...

jquery-ui datepicker 设置开始结束时间选择范围

1、同时获得两个文本框对象,并将其转换为datepicker(利用jQuery的选择器)HTML代码:开始日期: 结束日期: Js代码:2、同样在选择日期后,触发onSelect事件,调用函数传递selectedDate参数,函数体中首先判断触发事件的是开始...

如何设置多功能jquery日期控件 jedate跟随系统时间变化

日期对象可以使用系统的内置的构造函数来创建日期对象: var d=new Date( );d.getYear( ); //返回年不建议使用 d.getFullYear( ); //返回年,4位数,建议使用 d.getMonth( );//返回月份,其值为...

jquery easyui中日历控件(easyui-datebox) 现实的时间格式为:06/27...

isNaN(d)){return new Date(y,m-1,d);} else {return new Date();}}; 改变databox控件默认显示格式就好了,代码已贴:你可以添加在将要使用的页面内,也可以直接添加在全局Js文件中,那么所有用到databox的地方,...

js或者jquery怎样获得前一天0点,前一周0点,指定月份的时间戳

alert(yesterday);// 上周一var lastMonday = new Date(today- oneday * (today.getDay() + 6));alert(lastMonday);// 上个月1号var lastMonthFirst = new Date(today - oneday * today.getDate());lastMonth...

求一段jquery时间选择特效代码,单击开始时间选择完毕以后自动跳到第二...

jquery有提供datepicker~里面有一个date_range,在jquery提供的例子里面,我们只需要加上选择完毕,跳转到另外一个时间框进行选择就好了~是吧~那么~我们就 --- &lt;!DOCTYPE html&gt; jQuery UI Datepicker - Select a Date ...

jquery倒计时代码是怎么写的

编写jquery代码 (function(){ show_time();});function show_time(){ var time_start = new Date().getTime(); //设定当前时间 var time_end = new Date("2015/10/01 00:00:00").getTime(); //设定目标...

求助,jquery datepick日历插件,怎么显示时分秒?可以显示吗

看遍了datepicker的API没有找到格式化到时间分秒的。只能选择日期。这点很不好。JavaScript code (function(){ //$.datepicker.formatDate('DD, MM d, yy', new Date(2007, 7 - 1, 14), {dayNamesShort: $.date...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top