利用JS实现手机移动端课程表代码



38 148 50



特效描述:利用JS实现 手机移动端 课程表代码,利用JS实现手机移动端课程表代码

代码结构

1. 引入JS

<script src="exampel/Timetables.min.js"></script>

2. HTML代码

<div id="coursesTable"></div>
<button onClick="onChange()"
	style="background-color: #00a2ae; color: #fff; padding: 5px 10px; border-radius: 4px;border: none">
切换课表
</button>
<script>
var courseList = [
['大学英语(Ⅳ)@10203', '大学英语(Ⅳ)@10203', '', '', '', '', '毛概@14208', '毛概@14208', '', '', '', '选修'],
['', '', '信号与系统@11302', '信号与系统@11302', '模拟电子技术基础@16204', '模拟电子技术基础@16204', '', '', '', '', '', ''],
['大学体育(Ⅳ)', '大学体育(Ⅳ)', '形势与政策(Ⅳ)@15208', '形势与政策(Ⅳ)@15208', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],
['', '', '', '', '电装实习@11301', '电装实习@11301', '', '', '', '大学体育', '大学体育', ''],
['', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '', '', '信号与系统', '信号与系统', '', ''],
];
var week = window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五'] :
['一', '二', '三', '四', '五'];
var day = new Date().getDay();
var courseType = [
[{index: '1', name: '8:30'}, 1],
[{index: '2', name: '9:30'}, 1],
[{index: '3', name: '10:30'}, 1],
[{index: '4', name: '11:30'}, 1],
[{index: '5', name: '12:30'}, 1],
[{index: '6', name: '14:30'}, 1],
[{index: '7', name: '15:30'}, 1],
[{index: '8', name: '16:30'}, 1],
[{index: '9', name: '17:30'}, 1],
[{index: '10', name: '18:30'}, 1],
[{index: '11', name: '19:30'}, 1],
[{index: '12', name: '20:30'}, 1]
];
// 实例化(初始化课表)
var Timetable = new Timetables({
el: '#coursesTable',
timetables: courseList,
week: week,
timetableType: courseType,
highlightWeek: day,
gridOnClick: function (e) {
  alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
  console.log(e);
},
styles: {
  Gheight: 50
}
});
//切换课表
function onChange() {
var courseListOther = [
  ['', '', '', '', '毛概@14208', '毛概@14208', '', '', '', '选修', '', ''],
  ['大学英语(Ⅳ)@10203', '大学英语(Ⅳ)@10203', '', '', '模拟电子技术基础@16204', '模拟电子技术基础@16204', '', '', '', '', '', ''],
  ['', '', '信号与系统@11302', '信号与系统@11302', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],
  ['形势与政策(Ⅳ)@15208', '形势与政策(Ⅳ)@15208', '', '', '电装实习@11301', '电装实习@11301', '', '', '', '大学体育', '大学体育', ''],
  ['大学体育(Ⅳ)', '大学体育(Ⅳ)', '', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '信号与系统', '信号与系统', '', ''],
];
Timetable.setOption({
  timetables: courseListOther,
  week: ['一', '二', '三', '四', '五', '六', '日'],
  styles: {
	palette: ['#dedcda', '#ff4081']
  },
  timetableType: courseType,
  gridOnClick: function (e) {
	console.log(e);
  }
});
};
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到