前端 javascript 练习题--Math、Data及函数封装
好程序员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

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
LoRaWAN设备数据解析及开源MQTT SDK设备端模拟
概述 LoRaWAN设备与物联网平台的通信数据格式为透传/自定义,因此需要使用数据解析脚本,解析上下行数据。本文主要以阿里云官方文档LoRaWAN设备数据解析为基础,基于开源MQTT SDK,实现完整的: 设备<->云端消息链路测试。 操作步骤 前期准备 1、创建产品,因为这边没有入网凭证,使用WiFi联网方式,数据格式:透传/自定义: 2、添加物模型,可以直接参考官方文档说明逐个添加,这里提供对应物模型的完整文本,可以copy内容到本地自己创建的:model.json文件,然后物联网平台管理控制台直接导入: { "schema":"https://iotx-tsl.oss-ap-southeast-1.aliyuncs.com/schema.json", "profile":{ "productK
-
下一篇
前端 javascript 练习题 -简易年历及tab切换
前端 javascript 练习题 -简易年历及tab切换简易年历eg1:将数组中的值输出改变样式可以直接改样式,也可以修改类名var okuang=document.getElementById("kuang");var oli=document.getElementsByTagName("li");var arr=[11,22,33,44,55];var index=0; //定义一个变量用来保存索引值for(var i=0;i oli[i].onclick=function(){ for(var j=0;j<oli.length;j++){ //排他功能 oli[j].style.backgroundColor="#666"; oli[j].style.color="#fff"; } okuang.innerHTML=arr[index]; //此时不能用arr[i],因为在点击之前for已经执行完了,此时i为oli的元素个数值 this.style.backgroundColor="red"; this.style.color="#000"; index++; }} 解析...
相关文章
文章评论
共有0条评论来说两句吧...