html js开发课程表,利用JS实现手机移动端课程表代码

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

代码结构

1. 引入JS

2. HTML代码

style="background-color: #00a2ae; color: #fff; padding: 5px 10px; border-radius: 4px;border: none">

切换课表

var courseList = [

['大学英语(Ⅳ)@10203', '大学英语(Ⅳ)@10203', '', '', '', '', [email protected]', [email protected]', '', '', '', '选修'],

['', '', [email protected]', [email protected]', [email protected]', [email protected]', '', '', '', '', '', ''],

['大学体育(Ⅳ)', '大学体育(Ⅳ)', '形势与政策(Ⅳ)@15208', '形势与政策(Ⅳ)@15208', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],

['', '', '', '', [email protected]', [email protected]', '', '', '', '大学体育', '大学体育', ''],

['', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '', '', '信号与系统', '信号与系统', '', ''],

];

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 = [

['', '', '', '', [email protected]', [email protected]', '', '', '', '选修', '', ''],

['大学英语(Ⅳ)@10203', '大学英语(Ⅳ)@10203', '', '', [email protected]', [email protected]', '', '', '', '', '', ''],

['', '', [email protected]', [email protected]', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],

['形势与政策(Ⅳ)@15208', '形势与政策(Ⅳ)@15208', '', '', [email protected]', [email protected]', '', '', '', '大学体育', '大学体育', ''],

['大学体育(Ⅳ)', '大学体育(Ⅳ)', '', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '信号与系统', '信号与系统', '', ''],

];

Timetable.setOption({

timetables: courseListOther,

week: ['一', '二', '三', '四', '五', '六', '日'],

styles: {

palette: ['#dedcda', '#ff4081']

},

timetableType: courseType,

gridOnClick: function (e) {

console.log(e);

}

});

};