帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS获取日期代码
JS获取日期代码
浏览:761次
-
评论:0次
-
发布时间:2017-08-24
Html
Css
Js
<
一月
2013
2014
2015
2016
2017
2018
>
日
一
二
三
四
五
六
.calendar { width:300px; height:243px; border:1px solid #ccc; border-radius:5px; position:relative; } .calendar .head { padding:10px 10px; text-align:center; position:relative; } .calendar .head button { width:30px; height:30px; line-height:30px; text-align:center; background:#fff; border:1px solid #ccc; border-radius:3px; } .calendar .head button.prevbtn { position:absolute; left:30px; } .calendar .head button.nextbtn { position:absolute; right:30px; } .calendar .head select { height:30px; width:100px; text-align:center; } .calendar .head select option { text-align:center; } .calendar .datebody table { width:100%; } .calendar .datebody table td { text-align:center; border:1px solid #ccc; } .calendar .new,.old { color:#ccc; } .calendar .active { background:#0BB20C; } .calendar .on { background:#FF6600; }
function datePicker() { this.databody = $(".datebody table tbody") this.select = $(".head select"); this.monthspan = $(".head span span"); this.date = new Date(); this.select.find("option[value=" + this.date.getFullYear() + "]").attr("selected", true); this.year = this.select.find('option:selected').val() this.month = this.date.getMonth() + 1; this.day = this.date.getDay(); this.nowyear = this.date.getFullYear(); this.nowmonth = this.date.getMonth() + 2; this.nowdays = this.date.getDate() this.days; this.num = 1; } datePicker.prototype.toCN = function(num) { switch (num) { case 1: return "一" break; case 2: return "二" break; case 3: return "三" break; case 4: return "四" break; case 5: return "五" break; case 6: return "六" break; case 7: return "七" break; case 8: return "八" break; case 9: return "九" break; case 10: return "十" break; case 11: return "十一" break; case 12: return "十二" break; } } datePicker.prototype.applyMonth = function(month) { this.date = new Date(month); return this.month = this.date.getMonth(); }; datePicker.prototype.applyDay = function(year, month, day) { this.date = new Date(year, month - 1, day); return this.date.getDay(); } datePicker.prototype.monDays = function(n) { this.month = n || this.month if (this.month == 2) { return this.days = this.year % 4 == 0 ? 29 : 28; } else if (this.month == 1 || this.month == 3 || this.month == 5 || this.month == 7 || this.month == 8 || this.month == 10 || this.month == 12) { //月份为:1,3,5,7,8,10,12 时,为大月.则天数为31; return this.days = 31; } else { //其他月份,天数为:30. return this.days = 30; } } datePicker.prototype.init = function(n) { this.month = n || this.month; this.str = "
"; this.monthspan.html(datepicker.toCN(this.month) + "月") this.day = datepicker.applyDay(this.year, this.month, 1); if (this.day == 0) { this.num = 0; } datepicker.monDays(this.month) for (var j = this.days - this.day + 1; j <= this.days; j++) { this.str += "
" + j + "
" this.num = this.day; } datepicker.monDays(this.month + 1) var that = this; for (var i = 1; i <= this.days; i++) { if (i == this.nowdays && this.month == this.nowmonth && this.year == this.nowyear) { this.str += "
" + i + "
" } else { this.str += "
" + i + "
" } this.num++ if (this.num % 7 == 0) { this.str += "
" } } this.day = datepicker.applyDay(this.year, this.month - 1, this.days); for (var i = 1; i < 7 - this.day; i++) { this.str += "
" + i + "
" this.num++ if (this.num % 7 == 0) { this.str += "" } } this.databody.html(this.str) this.month = this.month - 1; } datePicker.prototype.changeMonth = function() { var that = this; var s = this.month; $(".prevbtn").click(function() { s = s - 1 if (s < 1) { s = 1 return false } datepicker.init(s) }) $(".nextbtn").click(function() { s = s + 1; if (s > 12) { s = 12; return false } datepicker.init(s) }) } datePicker.prototype.changeYear = function() { var that = this; this.select.change(function() { that.year = $(this).find('option:selected').val() datepicker.init(that.month) }) } var datepicker = new datePicker(); datepicker.init() datepicker.changeMonth() datepicker.changeYear(); function mouthse(oMouthtml) { switch (oMouthtml) { case '一月': return "01" break; case '二月': return "02" break; case '三月': return "03" break; case '四月': return "04" break; case '五月': return "05" break; case '六月': return "06" break; case '七月': return "07" break; case '八月': return "08" break; case '九月': return "09" break; case '十月': return "10" break; case '十一月': return "11" break; case '十二月': return "12" break; } }; function clickSel(obj, obj2) { if (obj.hasClass('on')) { obj.removeClass('on'); $(obj2).val(''); } else { $('td').removeClass('on'); obj.addClass('on'); var oMouthtml = $('#oMouth').html(); var oMouth = mouthse(oMouthtml); var oYearhtml = $("#select1 option:selected").text(); var oData = obj.html(); //console.log(oMouth); $(obj2).val(oYearhtml + '-' + oMouth + '-' + oData); }; }; $('table').on('click', 'td', function() { clickSel($(this), '#riqi'); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.8.3
<!doctype html><html><head><meta charset="utf-8"><title>JS获取日期代码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:类似旅游网站上获取日期的代码,里面包含源码,可以 根据 自己 的需求进行更改,在样式上比较糙,可以 自己调节一下
JS原生简易年历
兼容全部浏览器的隔行换色
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
761
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值