您现在的位置是:首页 > 文章详情

前端 javascript 练习题--Math、Data及函数封装

日期:2019-10-10点击:435

好程序员web前端教程将会为大家持续分享前端javascript练习题系列。
Math 对象
1.编写一个函数,获得一个十六进制的随机颜色的字符串(例如:#20CD4F)
方法:
function f2(){

var str="0123456789abcdef"; var color="#"; for(var i=0;i<6;i++){ var num=Math.floor(Math.random()*str.length); color=color+str[num]; } console.log(color);}f2();

date对象
数码时钟
思路分析:将时分秒的图片,按照一定规则命名,方便后续根据时间设置图片路径
方法:

<img src="img/0.png" alt="" /> <img src="img/0.png" alt="" /> <span>时</span> <img src="img/0.png" alt="" /> <img src="img/0.png" alt="" /> <span>分</span> <img src="img/0.png" alt="" /> <img src="img/0.png" alt="" /> <span>秒</span></div>

function f1(){ var str=""; //通过标签获取所有的图片存放在变量imgid中 var imgid=document.getElementsByTagName("img"); var oDate = new Date(); //创建时间对象 var h=oDate.getHours(); //分别去获取当前的时分秒 var fen=oDate.getMinutes(); var miao= oDate.getSeconds(); var h1=h>=10?h:"0"+h; //保证都是由2位组成 var fen1=fen>=10?fen:"0"+fen; var miao1=miao>=10?miao:"0"+miao; str=str+h1+fen1+miao1; //组合成一个新的字符串 for(var i=0;i<str.length;i++){ //遍历字符串 //类比src="img/0.png"; imgid[i].src='img/'+str[i]+'.png'; //设置每个图片的src路径 } } setInterval(f1,1000); //定时器 后一个参数以毫秒为单位

函数的封装
封装方法:将函数作为对象的参数
eg1:.判断某年份是否为闰年,将日期格式化输出 “2015|08|24”,获得某个月份的天数,判断两个日期相差的天数,获得N天以后的日期
var dateUtil = {
isLeapYear:function(year){

 if(year%4==0&&year%100!=0 || year%400==0){ return true; } return false;

},
formatDate:function(date,str){

 var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); if(month < 10){ month = "0"+month; } if(day < 10){ day = "0" + day; } var ss = year+str+month+str+day return ss;

},
getDays:function(date){

 var year = date.getFullYear(); var month = date.getMonth()+1; switch(month){ case 2: if(dateUtil.isLeapYear(year)){ return 29; } return 28; break; case 4: case 6: case 9: case 11: return 30; break; default: return 31; }

},
getDiffDays:function(date1,date2){

 //两个日期相减会得到一个相差的毫秒数 //相差的天时分秒 var ss = Math.abs((date2-date1)/1000); var day = Math.floor(ss/24/3600); var hour = Math.floor(ss/3600%24); var minute = Math.floor(ss/60%60); var second = Math.floor(ss%60); return day+"天"+hour+"时"+minute+"分"+second+"秒";

},
getNDays:function(n){

 var oDate = new Date(); oDate.setDate(oDate.getDate()+n); return oDate;

}};
DOM和BOM

原文链接:https://yq.aliyun.com/articles/720490
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章