请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端教程分享前端javascript练习题一

[复制链接]
叶子老师 发表于 2019-10-11 15:14:57 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
好程序员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对象
数码时钟思路分析:将时分秒的图片,按照一定规则命名,方便后续根据时间设置图片路径

方法:

<div id="pic">

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

<script>

    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.src='img/'+str+'.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
好程序员web前端教程官网:http://www.goodprogrammer.org/html5_class.shtml


精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启