织梦网站模板官网,中建五局华东建设公司网站,济南网站推广建设有限公司,自己做的网站 网站备案流程功能描述#xff1a;
1. 利用split()方法对测试数据进行解析#xff1a;学科#xff0c;日期
2. 将测试数据封装成对象数组的格式
3. 使用数组的sort()方法和Date对象#xff0c;将测试数据按照日期从早到晚进行排序
4. 表格数据的静态填充
5. 距离最近考试的倒计时天…功能描述
1. 利用split()方法对测试数据进行解析学科日期
2. 将测试数据封装成对象数组的格式
3. 使用数组的sort()方法和Date对象将测试数据按照日期从早到晚进行排序
4. 表格数据的静态填充
5. 距离最近考试的倒计时天数的提醒 代码如下这里引入了jquery.js
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlejs小练习/title
/head
bodytabletheadtrthID/thth考试科目/thth开考日期/th/tr/theadtbody idmyBody!-- 具体数据 --/tbody/table!-- 最近日期的倒计时 --div stylemargin-top: 10px;h3 idcountdown/h3/div!-- 引入jquery.js --script src../js/jquery.min.js/scriptscriptvar testData 数学, 2023-12-23\n英语,2023-11-11\n语文,2023-10-29\n物理,2023-12-27\n化学,2023-09-30\n;//1. 将testData数据通过split()进行分割: 学科,日期 ---为一组var subject_date testData.split(\n);//2. 注意实际的subject_date最后存放为空因为末尾的\nvar length subject_date.length-1;console.log(subject_date中实际的数据数目为: length);//3. 将subject_date中的每一项数据以对象数组的形式进行存放var objArr [];for(var i0; ilength; i){ //此时subject_date每一个数的格式subject,datevar subject subject_date[i].split(,)[0]; //分割, 取前面的学科var date subject_date[i].split(,)[1]; //分割取后面的日期objArr.push({subject:${subject},date:${date}});//打印出来objArr数组中存放的每一项console.log(-------------objArr[${i}].subject${objArr[i].subject});console.log(-------------objArr[${i}].date${objArr[i].date});}//4. 比较date调用数组的sort()方法按照日期的大小排序var sorted objArr.sort((a, b) {//Date对象存储的是从1970年1月1日午夜UTC开始计算的毫秒数var dateA new Date(a.date); var dateB new Date(b.date);//dateA-dateB为正说明b比a小交换a,bdateA-dateB为负数或0不交换return dateA - dateB; });//5. 表格数据填充for(var i0; isorted.length; i){$(#myBody).append(trtd${i1}/tdtd${sorted[i].subject}/tdtd${sorted[i].date}/td/tr);}//6. 获取最近的日期并转为毫秒数的形式var earlist new Date(objArr[0].date);//7. 获取当前的日期毫秒数var current new Date();//8. 计算日期差异以毫秒为单位var dateDiff earlist - current;//9. 毫秒数转为天数var dayDiff Math.floor(dateDiff/(1000 * 60 * 60 * 24));//10. 输出到页面document.getElementById(countdown).innerHTML 当前最近的考试是${objArr[0].subject}, 还剩${dayDiff}天;/script
/body
/html 运行结果
