前言
![](/upload/ad_content/xuanchuantu-11.jpg)
创新互联长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为澄江企业提供专业的
网站制作、成都网站制作,
澄江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
在日常开发中,大多数都是在和框架打交道,久而久之便遗忘了原生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: `
日
`
},
days: {},
}
//赋值默认参数
this.options = Object.assign({}, defaluteOptions, options);
//轮番就调用函数动态创建dom
this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();
当前文章:利用原生JavaScript实现造日历轮子实例代码-创新互联
网页路径:
http://bjjierui.cn/article/dcoidg.html