没有合适的资源?快使用搜索试试~ 我知道了~
前言 在日常开发中,大多数都是在和框架打交道,久而久之便遗忘了原生JS的感觉,个人感觉中原生JS基础还是很重要的,所以最近就利用了空余时间造一个轮子出来,虽然以我的水平造出来的轮子质量还是不太可靠的,但是我觉得用来练练手还是不错的,哈哈!! So, Let’s begin! github:github.com/Zero-jian/p… 以下是日历的样子,是有点难看,讲究讲究,重点在于JS部分,嘻嘻!!! 关于日历组件的实现思路 设置默认参数 检查节点参数是否传入,否则抛出错误 动态创建显示本日星期几的横轴 动态创建日历的日子 最后添加一点dom动作就好 先来看看构造函数
资源详情
资源评论
资源推荐
利用原生利用原生JavaScript实现造日历轮子实例代码实现造日历轮子实例代码
前言前言
在日常开发中,大多数都是在和框架打交道,久而久之便遗忘了原生JS的感觉,个人感觉中原生JS基础还是很重要的,所以最近就利用了空余时间造一个轮子出来,虽然以我的水平
造出来的轮子质量还是不太可靠的,但是我觉得用来练练手还是不错的,哈哈!!
So, Let’s begin!
github:github.com/Zero-jian/p…
以下是日历的样子,是有点难看,讲究讲究,重点在于JS部分,嘻嘻!!!
关于日历组件的实现思路关于日历组件的实现思路
设置默认参数
检查节点参数是否传入,否则抛出错误
动态创建显示本日星期几的横轴
动态创建日历的日子
最后添加一点dom动作就好
先来看看构造函数内容先来看看构造函数内容
constructor(options) {
let defaluteOptions = {
element: null, //这是节点
startOfWeek: 1,
strings: {
week: n => {
let map = {
0: '周日',
1: '周一',
2: '周二',
3: '周三',
4: '周四',
5: '周五',
6: '周六',
}
return map[n];
},
templateDay: `<li class="currentMonth">
<span class="dayLabel">
<span class="day"></span>
<span class="unit">日</span>
</span>
</li>`
},
days: {},
}
//赋值默认参数
this.options = Object.assign({}, defaluteOptions, options);
//轮番就调用函数动态创建dom
this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();
初始化创建Calendar类对象的时候设置数值,赋值默认参数以及调用方法来动态创建dom,相信小伙伴们看懂这段代码没压力。
该轮子我全程都是用ES6写的,毕竟程序员还是要跟上潮流的!!
赋值参数后开始轮番调用函数,首先调用的是**this.checkOptions()**方法,检查节点是否存在
checkOptions() {
//如果节点不存在直接抛出错误
if (!this.options.element) {
throw new Error('element is request');
}
return this;
}
接下来就是获取当天的年月日接下来就是获取当天的年月日
毕竟是日历,获取当前的年月日当参考还是很重要的
weixin_38655878
- 粉丝: 5
- 资源: 973
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0