前端 javascript 练习题--Math、Data及函数封装-低调大师

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

2019-10-10 524

好程序员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业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

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

2019-10-11

624

前端 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++; }} 解析...

2019-10-11

476

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。