JavaScript基础知识（二）

最新推荐文章于 2021-04-19 20:13:03 发布
最新推荐文章于 2021-04-19 20:13:03 发布
阅读量327 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuguangruoshi/article/details/73251859
版权

一． JavaScript组成

     ECMAScript   核心

     DOM        文档对象模型

     BOM        浏览器对象模型

二． 数据类型

    ECMAScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number、和String。还有一种复杂的数据类型Object。

    1.typeof操作符

         返回的字符串：

         “undefined”    //如果这个值未定义

         “boolean”     //如果这个值是布尔值；布尔值：true，false

          “string”        //如果这个值是字符串；

          “number”        //如果这个值是数值；

          “object”        //如果这个值是对象或null；

          “function”        //如果这个值是函数；

    2.Undefined类型

         Undefined类型只有一个值，即特殊的undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。

    3.Null类型

         Null类型是第二个只有一个值的数据类型，这个特殊的值是null。从逻辑角度上来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null值会返回”object”的原因。

    4.Boolean类型

        Boolean类型只有两个字面值：true和false。这两个值与数字值不是一回事，因此true值不一定等于1，false值也不一定等于0。

    5.Number类型

         1).最基本的数字面量格式是十进制：

                var intNum=55;  //整数

            八进制字面量的第一位必须是零：

                var octalNum=070;  //八进制的56

            十六进制字面量的前两位必须是0x：

                var hexlNum=0xA;  //十六进制的10

         2).浮点数值

              var floatNum=1.1;

         3).数值范围

              负数，则被转换成-Infinity(负无穷)；

              正数，则被转换成Infinity(正无穷)。

         4).NaN

              即非数值，是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。

         5).数值转换

             有3个函数可以把非数值转化成数值：Number()、parseInt()和parseFloat()。第一个函数，即转型函数Number()可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值。

              Number()函数的转换规则如下：

                 如果是Boolean值，true和false将分别被转换为1和0
                 如果是是数字值，只是简单的传入和返回
                 如果是null值，返回0
                 如果是undefined，返回NaN
                 如果是字符串，遵循下列规则：
                 如果字符串中只包含数字，则将其转换为十进制数值，级“1”会变成1，“123”会变成123，而“011”会变成11（前面的0被忽略了）
                 如果字符串中只包含有效的浮点格式，如“1.1”，则将其转换为对应浮点数值（同样，也会忽略前导零）
                 如果字符串中只包含有效的十六进制格式，例如“0xf”，则将其转换为相同大小的十进制整数值
                 如果字符串是空的（不包含任何字符），则将其转换为0
                 如果字符串中包含除上述格式之外的字符，则将其转换为NaN
                 如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()把各种数据类型转换为数值确实有点复杂。

    6.String类型

          String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号（“”）或单引号（‘’）表示。

    7.Object类型

          这个值是对象或null。ECMAScript中的对象是一组数据和功能的集合。

                var o=new Object();

三．日期对象

     var time=new Date();    

     var y=time.getFullYear();    //获取当前年份

     var m=time.getMonth()+1;   //获取当前月份

     var d=time.getDate();       //获取当前日

     var h=time.getHours();       //获取当前小时数

     var m1=time.getMinutes();     //获取当前分钟数

     var s=time.getSeconds();         //获取当前秒数

     document.write(y+"年"+m+"月"+d+"日"+h+"："+m1+"："+s);

四．数学对象Math

   1.

      1). Math.E   

         Math.E属性代表算术常量e，即自然对数的底数，其值近似于2.71828。

      2).Math.LN2                          

         此属性就是loge2，即2的自然对数，其值近似于0.69314718055994528623。      

      3).Math.LN10

         Math.LN10就是loge10，即10的自然对数，其值近似于 2.3025850929940459011。

      4).Math.LOG2E

         Math.LOG2E就是log2e，即以2为底e的对数，其值近似于1.442695040888963387。

      5).Math.LN10

         Math.LN10就是loge10，即10的自然对数，其值近似于 2.3025850929940459011。

      6).Math.PI

         Math.PI属性就是π，即圆的周长和它的直径之比。

      7).Math.SQRT1_2

         Math.SQRT1_2属性返回2的平方根的倒数，这个值近似为0.7071067811865476。

      8).Math.SQRT2

         Math.SQRT2属性返回2的平方根，此值近似为 1.4142135623730951。      

   2.Math.abs()      //返回数值的绝对值。

   3.Math.sin()      //返回一个数字的正弦。

   4.Math.cos()      //返回指定数字的余弦。

   5.Math.acos()    //返回一个数的反余弦。

   6.Math.asin()    //返回一个数的反正弦值。

       注:如果参数x超过了-1.0 ~ 1.0的范围，那么浏览器将返回NaN。parameter：必需、必须是一个数值，该值介于-1.0 ~ 1.0之间。

   7.Math.acos()    //返回一个数的反余弦。

   8.Math.atan()    //返回数字的反正切值。

   9.Math.ceil()   //将数字进行向上取整。

   10.Math.floor()   //将数字进行向下取整。

   11.Math.max()    //返回指定的数中较大的一个。

       console.log(Math.max());

            //如果没有参数，则返回-Infinity。

       console.log(Math.max(NaN,5));

           //如果某个参数为NaN，则返回NaN。

       console.log(Math.max(6,5));

             //筛选两个参数中最大的那个数字，6。

   12.Math.min()   //返回指定数字中较小的一个。

       console.log(Math.min());

          //如果没有参数，则返回Infinity。

       console.log(Math.min(NaN,5));

           //如果某个参数为NaN，则返回NaN。

       console.log(Math.min(4,5));

           //筛选参数列表中的最小值，4。

   13.Math.pow()   //返回x的y次幂的值。

         Math.pow(x,y)

              //x：必需，底数，必须是数字。

              //y：必需，幂数，必须是数字。

        console.log(Math.pow(4,5));

   14.Math.sqrt(x)   //返回一个数的平方根。

      console.log(Math.sqrt(4));

   15.Math.round()   //对参数进行四舍五入操作。

   16.Math.random()   //返回介于0 ~ 1之间的一个随机数。

         特别说明:返回值包括0，但是不包括1。

五．倒计时时间

     var time=new Date();

     var furter=new Date(2017,6,11,0,0,0);

     var dis=(Math.floor((furter.getTime()-time.getTime())/1000));         

     var d=Math.floor(dis/86400);    //天

     var h=Math.floor(dis%86400/3600);   //时

     var m=Math.floor(dis%86400%3600/60);   //分

     var s=Math.floor(dis%60);    //秒

六．定时器

     function go(){

          alert(1);

     }go();

     setInterval(go,1000);    //1000ms=1s

   1.时间定时器

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="box">

    </div>

    <script>

    var obox=document.getElementById("box");

    function go(){

     var time=new Date();

       var y=time.getFullYear();

       var m=time.getMonth()+1;

       var d=time.getDate();

       var h=time.getHours();

       var m1=time.getMinutes();

       var s=time.getSeconds();

       obox.innerHTML=y+"年"+m+"月"+d+"日"+h+"时"+m1+"分 "+s+"秒";

    }

    go();

    setInterval(go,1000);

    </script>

</body>

</html>

  2.倒计时计时器

         <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="box">

    </div>

    <script>

    var obox=document.getElementById("box");

    function go(){

    var time=new Date();

        var furter=new Date(2017,6,11,0,0,0);

        var dis=(Math.floor((furter.getTime()-time.getTime())/1000));

        var d=Math.floor(dis/86400);

        var h=Math.floor(dis%86400/3600);

        var m=Math.floor(dis%86400%3600/60);

        var s=Math.floor(dis%60);

        obox.innerHTML=d+"天"+h+"小时"+m+"分钟"+s+"秒";

    }

    go();

    setInterval(go,1000);

    </script>

</body>

</html>

   3.钟表计时器

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title></title>

   <style>

   html,body{margin: 0;padding: 0;}

   div{width: 600px;height: 600px;}

   #box{background: url(clock.jpg) no-repeat center center ;margin: 0 auto;}      //url中插入表盘图片

  #h{background: url(hour.png) no-repeat center center;position: absolute;}     //url中插入时针图片

   #m{background: url(minute.png) no-repeat center center;position: absolute;}     //url中插入分针图片

  #s{background: url(second.png) no-repeat center center;position: absolute;}         //url中插入秒针图片

   </style>

</head>

<body>

   <div id="box">

   <div id="h">

   </div>

   <div id="m">

   </div>

   <div id="s">

   </div>

   </div>

   <script>

   var oh=document.getElementById("h");

   var om=document.getElementById("m");

   var os=document.getElementById("s");

   function go(){

   var time=new Date();

   var h=time.getHours();

   oh.style.transform='rotate('+h*30+'deg)';

   var m=time.getMinutes();

   om.style.transform='rotate('+m*6+'deg)';

   var s=time.getSeconds();

   os.style.transform='rotate('+s*6+'deg)';

   }

   go();

   setInterval(go,1000);

   </script>

</body>

</html>

七．选项卡

  1.选项卡顺序

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

     #ul1 li{width: 300px;height: 50px;background: greenyellow;list-style: none;text-align: center;margin-bottom: 10px;line-height: 50px;}

    </style>

</head>

<body>

    <ul id="ul1">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    </ul>

    <script>

    var oli=document.getElementById("ul1").getElementsByTagName("li");

    for(var i=0;i<oli.length;i++){

    oli[i].on=i;

    oli[i].οnclick=function(){

    alert(this.on);

    }

    }

    </script>

</body>

</html>

  2.单项选项卡

        <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    *{font-size: 16px;padding: 0;margin: 0;}

    li{list-style: none;}

    #box{width: 488px;margin: 20px auto;border: 1px solid #ADFF2F;}

 #box li{float: left;width: 120px;height: 40px;text-align: center;line-height: 40px;font-family: "微软雅黑";border: 1px solid #ADFF2F;}

 #box div{clear: both;display: none;height: 60px;text-align: center;line-height: 60px;}

    #box div.active{display: block;}

    .red{background: #ADFF2F;}

    </style>

</head>

<body>

    <div id="box">

    <ul>

    <li>tab1</li>

    <li>tab2</li>

    <li>tab3</li>

    <li>tab4</li>

    </ul>

    <div class="active">111</div>

    <div>222</div>

    <div>333</div>

    <div>444</div>

    </div>

    <script>

    var oli=document.getElementById("box").getElementsByTagName("li");

    var odiv=document.getElementById("box").getElementsByTagName("div");

    //   alert(odiv.length);

               for(var i=0;i<oli.length;i++){

                 oli[i].on=i;

                 oli[i].οnclick=function(){

                 for(var i=0;i<oli.length;i++){

                 oli[i].className="";

                 odiv[i].style.display="none";

                 }

                 this.className="red";

                 odiv[this.on].style.display="block";

                 }

                }

    </script>

</body>

</html>

  3).多项选项卡

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    *{font-size: 16px;padding: 0;margin: 0;}

L    i{list-style: none;}

    .box{width: 488px;margin: 20px auto;border: 1px solid #ADFF2F;}

 .box li{float: left;width: 120px;height: 40px;text-align: center;line-height: 40px;font-family: "微软雅黑";border: 1px solid #ADFF2F;}

 .box div{clear: both;display: none;height: 60px;text-align: center;line-height: 60px;}

    .box div.active{display: block;}

    .red{background: #ADFF2F;}

    </style>

</head>

<body>

    <div class="box" id="tet">

    <ul>

    <li>tab1</li>

    <li>tab2</li>

    <li>tab3</li>

    <li>tab4</li>

    </ul>

    <div class="active">111</div>

    <div>222</div>

    <div>333</div>

    <div>444</div>

    </div>

    <div class="box" id="tet1">

    <ul>

    <li>tab1</li>

    <li>tab2</li>

    <li>tab3</li>

    <li>tab4</li>

    </ul>

    <div class="active">111</div>

    <div>222</div>

    <div>333</div>

    <div>444</div>

    </div>

    <div class="box" id="tet2">

    <ul>

    <li>tab1</li>

    <li>tab2</li>

    <li>tab3</li>

     <li>tab4</li>

    </ul>

    <div class="active">111</div>

    <div>222</div>

    <div>333</div>

    <div>444</div>

    </div>

    <script>

    tab("tet","click");

    tab("tet1","click");

    tab("tet2","click");

    function tab(id,event){

    var oid=document.getElementById(id);

    var oli=oid.getElementsByTagName("li");

    var odiv=oid.getElementsByTagName("div");

    for(i=0;i<oli.length;i++){

    (function(index){

    oli[index].addEventListener(event,

function(){

                         for(var i=0;i<oli.length;i++){

                         oli[i].className="";

                         odiv[i].style.display="none";

                        }

                        this.className="red";

                        odiv[index].style.display="block";

    })

   })(i)

    }

    }

    </script>

</body>

</html>

 

附件1（验证码）：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body,html{margin: 0;padding: 0;font-size: 26px;text-align: center;font-family: "微软雅黑";line-height: 35px;}

#box {width: 260px;height: 100px;padding: 20px;background: #ccc;margin: 30px auto;}

#txt1{width: 100px;height: 35px;padding: 5px 10px;float: left;margin-right: 10px;font-size: 26px;text-align: center;font-family: "微软雅黑";line-height: 35px;}

#yzm{width: 100px;height: 35px;padding: 5px 10px;float: left;background: #ffffff;}

button{width: 220px;height: 35px;margin-top: 10px;margin-left: 5px;background: green;border: 1px solid green;color: white;font-size: 16px;}

</style>

</head>

<body>

<div id="box">

<input type="text" id="txt1" />

<span id="yzm"></span>

<button>确定</button>

</div>

<script>

var oinput = document.getElementsByTagName("input")[0];

var ospan = document.getElementsByTagName("span")[0];

var obtn=document.getElementsByTagName("button")[0];

//验证码

var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m"];

var length=arr.length;

var str="";

function yanzheng(){

for(var i=0;i<6;i++){

var num=Math.floor(Math.random()*length);

str+=arr[num];

}

ospan.innerHTML=str;

}

yanzheng();

//点击确定

obtn.οnclick=function(){

if(oinput.value==""){

alert("请输入验证码！");

}

else if(oinput.value.toLowerCase()!=ospan.innerHTML.toLowerCase()){

alert("验证码错误！");

oinput.value="";

}

else{

alert("验证码正确。");

}

}

</script>

</body>

</html>

附件2（斑马线）：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

table{width: 100%;height: 500px;}

table td{border: 1px solid #ADFF2F;}

</style>

</head>

<body>

<table cellpadding="0" cellspacing="0">

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<script>

var tab=document.getElementsByTagName("table")[0];

var otr=tab.getElementsByTagName("tr");

// alert(otr.length)

            for(i=0;i<otr.length;i++){

             if(i%2==0){

             otr[i].style.background="#ADFF2F";

             }

             else{

             otr[i].style.background="pink";

             }

            }

</script>

</body>

</html>

 

 

liuguangruoshi
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript基础知识整理
10-29
JavaScript是Web开发中不可或缺的一部分，尤其对于初学者来说，掌握其基础知识至关重要。下面将详细讲解JavaScript的基础知识，包括创建脚本、隐藏脚本、处理浏览器兼容性问题、链接外部脚本、注释、输出到浏览器、...
无涯教程-Javascript - getHours()函数
无涯教程
02-21 431
JavaScript Date.getHours()方法根据本地时间返回指定日期中的小时。getHours()返回的值是介于0和23之间的整数。
Js实现实时显示系统时间（获取当前时间并显示）
热门推荐
琅枫的博客
04-19 4万+
js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法： 获取当前时间： var d = new Date();//获取系统当前时间 获取特定格式的时间： 1、获取当前年份 getYear()方法：可以获取年份（2位或4位），其返回值是表示当前Date 对象的年份字段 说明：当年
js Date（日期）对象操作 getHours()
qq_33650655的博客
06-12 4455
作用：返回时间的小时字段。 语法：dateObject.getHours() 返回：返回值是 0 （午夜） 到 23 （晚上 11 点）之间的一个整数。dateObject 的小时字段，以本地时间显示。 提示： 由 getHours() 返回的值 是一个两位的数字。 不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。该方法总是结合一个 Date 对象来使用。 var d =...
JS-getHours（）方法
weixin_34324081的博客
04-25 614
var time=new Date().getHours(); 获取当前系统时间的小时值，eg：若当前系统时间为2019.4.25 10:52 则返回10 转载于:https://www.cnblogs.com/zhufangyuan09/p/10766995.html
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
Javascript基础知识（二）事件
10-25
本文是javascript系列文章的第二篇，主要介绍javascript事件，都是本人的一些心得，希望对大家有所帮助
JavaScript基础知识整理
02-26
JavaScript是一种广泛应用于前端开发的直译式脚本语言，它基于对象、事件驱动，并具有安全性。JavaScript主要在浏览器环境中运行，被解释执行，用于增强网页的...了解并掌握这些基础知识，对于进行前端开发至关重要。
JavaScript基础知识
06-03
JS的引入 let的声明 数据类型
JavaScript中的数值转换详解
HHH_LLL的博客
06-04 484
有三个函数可以把非数值转换为数值： Number() parseInt() parseFloat() 第一个函数，转型函数Number()可以用于任何数据类型转换为数值。 而另外两个函数parseInt()，parseFloat()则专门用于把字符串转换成数值。 Number()函数的转换规则如下： 如果是Boolean值，true和false将分别被转换成1和0 如果是数字值，只是简单的传...
js时间与时间戳之间的转换操作，返回天、小时、分，全家桶
u011927449的博客
05-20 2654
1.将时间戳转换成时间 var formatDate = function(d) { var now = new Date(d); var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); v.
gethours_日期getHours（）方法以及JavaScript中的示例
cumudi0723的博客
06-29 1930
gethours JavaScript Date getHours()方法 (JavaScript Date getHours() method) getHours() method is a Date's class method and it is used to get the only hours from current time. getHours()方法是Date的类方法，用于获取...
分包合同计量单.docx
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
项目债务盘点明细表.docx
07-13
项目债务盘点明细表.docx
全网最热Python3入门+进阶 更快上手实际开发
最新发布
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
管理干部培训计划PPT模板
07-13
【作品名称】：管理干部培训计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
黑色风格年终总结汇报PPT模板
07-13
【作品名称】：黑色风格年终总结汇报PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Java实训教程 Java软件开发实战 Java类库 第4章 集合操作 共31页.pptx
07-13
【课程大纲】 完整教程：https://download.csdn.net/download/qq_27595745/89538425 Java软件开发实战 Java类库 第1章 Object类 共29页.pptx Java软件开发实战 Java类库 第2章 字符串处理 共49页.pptx Java软件开发实战 Java类库 第3章 包装器类等 共40页.pptx Java软件开发实战 Java类库 第4章 集合操作 共31页.pptx Java软件开发实战 Java类库 第5章 io操作 共35页.pptx Java软件开发实战 Java类库 第6章 其它综合 共38页.pptx Java软件开发实战 Java类库 第7章 JDBC 共113页.pptx
js基础知识，课堂笔记
07-10
二、JavaScript基础知识 1. 变量和数据类型 在JS中，变量用于存储数据，它的数据类型可以是字符串、数字、布尔值等。在声明变量时，需要使用关键词“var”、“let”或“const”，并赋予一个具体的值。此外，JS中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值