JavaScript(三)

最新推荐文章于 2024-06-29 16:57:52 发布

xiaogeldx

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量174

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/xiaogeldx/article/details/85455011

版权

JavaScript的math对象

math方法

sqrt:开方
abs:绝对值
PI:π
pow:ｘ的ｙ次方
round:取整
floor:向下
ceil:向上
max:最大数
min:最小值

random:随机数

  document.write(Math.sqrt(16)+'<br>');  //开方   4
  document.write(Math.abs(-1)+'<br>');     //绝对值   1
  document.write(Math.PI*2+'<br>');    //π     6.28.....
  document.write(Math.pow(2,3)+'<br>');   //x的y次方     8
  document.write(Math.round(3.6)+'<br>');  //取整，四舍五入	4
  document.write(Math.floor(3.2)+'<br>');  //向下取整	3
  document.write(Math.ceil(3.2)+'<br>');   //向上取整		4
  document.write(Math.max(1,34,23)+'<br>');    //最大值	34
  document.write(Math.min(1,34,23)+'<br>');    //最小值	1
  document.write(Math.random()+'<br>');//0-1之内的随机数
  document.write(Math.random()*100+'<br>');  //0-100随机数

JavaScript的日期对象

data方法

getFullYear:获取年
getMonth:获取月
getDate:获取日
getDay:获取周几
getHours:获取小时
getMINutes:获取分钟
getSeconds:获取秒数
Date.now:时间戳

时间戳：格林威治时间1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起至现在的总秒数

  var today = new Date();
  document.write(today+'<br>');
   //Mon Dec 31 2018 10:22:51 GMT+0800 (中国标准时间)
  var year = today.getFullYear();
  document.write(year+'<br>');    //2018
  var month = today.getMonth()+1;	//	从 Date 对象返回月份 (0 ~ 11)
  document.write(month+'<br>');   //12	
  var day = today.getDay();	//从 Date 对象返回一周中的某一天 (0 ~ 6)
  document.write(day+'<br>');     //1周一
  var day1 = today.getDate();		//
  document.write(day1+'<br>');      //31三十一号
  var hour = today.getHours();
  document.write(hour+'<br>');    //10(时)
  var minute = today.getMinutes();
  document.write(minute+'<br>');  //34(分)
  var second = today.getSeconds();
  document.write(second+'<br>');  //10(秒)
  document.write(year+'/'+month+'/'+day1+'/'+hour+':'+minute+':'+second)
  // 2018/12/31/10:37:14
  document.write(Date.now())   //1546224045934(ms)

JavaScript的函数

函数是通常把一系列重复执行调用的操作封装成一个方法，方便调用，让大量代码重复使用
定义一个函数
- function funName(){}
函数分类
- 有名函数
- 匿名函数

有名函数

    function add(参数) {     
        alert("我被调用了！");
    }		//后面不用;结尾
    add()   //调用

匿名函数

    var box = document.getElementsByTagName("div")[0];
    box.onclick = function () {    
        alert("434");
    };		//后面用;结尾

带参数传参

        function ase(a) {   	
        	alert(a);
	    }
	    ase(222);

不定长传参（以下两种都不报错）

    function a() {
        console.log(arguments);//固定用arguments
    }
    a(1,3,7,'xiaoge');

在这里插入图片描述
2.

function b(a,b) {
    console.log(arguments);
    console.log(a,b)
}
b(1);

在这里插入图片描述
3.

function b(a,b) {
    console.log(arguments);
    console.log(a,b)
}
b(1,3,7,'xiaoge');

在这里插入图片描述

函数表达式

自执行

   !function () {
      document.write("w"+"<br>")
  }();	//w
  +function () {
      document.write("we"+"<br>")
  }();		//we
  -function () {
      document.write("wer"+"<br>")
  }();		//wer
  (function () {
      document.write("wert"+"<br>")
  })();		//wert
  (function () {
      document.write("wertu"+"<br>")
  }());			//wertu

作用域

	//var 是定义局部变量
    var a = 100;
    function func() {
        var a = 200;
        alert(a);
    }
    alert(a);
    func();
    alert(a)		//100,200,100
    //不用var是定义全局变量
    var a = 100;
    function func() {
        a = 200;
        alert(a);
    }
    alert(a);
    func();
    alert(a)		//100,200,200

JavaScript的定时器

设置定时器：setTimeout
- 清除定时器：clearTimeout

设置定时器：setInterval

清除定时器：clearInterval

清除定时器的时候要给定时器加个名字

  <body>
  <button>stop</button>
  <script type="text/javascript">
      setTimeout(function () {
          console.log(123);
      },2000);    //两秒后执行一次，不再执行  2000ms,1s=1000ms
      var a = setInterval(function () {
          console.log(321);
      },2000);    //每两秒执行一次
      var b = document.getElementsByTagName('button')[0];
      b.onclick = function () {
          clearInterval(a);
      };
  </script>
  </body>

在这里插入图片描述

练习

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style>
	        #div1 {
	            width: 400px;
	            height: 60px;
	            border: 1px solid red;
	            margin: auto;
	            line-height: 60px;
	            text-align: center;
	        }
	        #div2 {
	            width: 600px;
	            height: 60px;
	            border: 1px solid red;
	            margin: auto;
	            line-height: 60px;
	            text-align: center;
	        }
	    </style>
	    <link rel="stylesheet" href="css/reset.css">
	    <link rel="stylesheet" href="css/test.css">
	    <script src="js/test.js"></script>
	</head>
	<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<script type="text/javascript">
	    var box1 = document.getElementById('div1');
	    var box2 = document.getElementById('div2');
	    var sum = 15;
	    function a() {
	        sum--;
	        if(sum<10){
	            sum = '0'+sum;
	        }
	        if(sum>0){
	            box1.innerText = '敌军还有'+sum+'秒到达战场';
	        }else{
	            box1.innerText = '全军出击';
	        }
	    }
	    setInterval('a()',1000);
	    function timer() {
	        var today = new Date();
	        var year = today.getFullYear();
	        var month = today.getMonth()+1;
	        var day = today.getDate();
	        var h = today.getHours();
	        var min = today.getMinutes();
	        var s = today.getSeconds();
	        if (h<10){
	            h = '0' + h;
	        }
	        if (min<10){
	            min = '0' + min;
	        }
	        if(s<10){
	            s = '0' + s;
	        }
	        box2.innerText = '现在是北京时间'+year+'/'+month+'/'+day+' '+h+':'+min+':'+s;
	    }
	    setInterval('timer()',1000);
	</script>
	</body>
	</html>

在这里插入图片描述

xiaogeldx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(三)

javascript的math对象math方法sqrt:开方ab:绝对值PI:πpow:ｘ的ｙ次方round:取整floor:向下ceil:向上max:最大数min:最小值random:随机数document.write(Math.sqrt(16)+’’); //开方 4document.write(Math.abs(-1)+’’); //绝对值 1d...
复制链接

扫一扫