js面向对象的方法和定时器

最新推荐文章于 2024-07-22 14:15:06 发布

傻乎乎的小不点

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量100

点赞数 4

文章标签： java 开发语言

本文链接：https://blog.csdn.net/m0_62697897/article/details/127043236

版权

1.Math对象下的方法

2.定时器

3.补充知识：变量和字符串拼接

1.Math对象下的方法

（1）取绝对值：Math.abs()

例：

var n=Math.abs(-9);

运行结果：

（2）返回x的y次幂：Math.pow(x,y)

例：

var n=Math.pow(2,10);

运行结果：

（3）返回x的平方根：Math.sqrt(x)

例：

var n=Math.sqrt(9);

运行结果：

（4）取最大值：Math.max()

例：

var n=Math.max(10,20,5,0,99);

运行结果：

（5）取最小值：Math.min()

例：

var n=Math.min(10,20,5,0,99);

运行结果：

（6）四舍五入：Math.round()

例：

var x=Math.round(88.88);

运行结果：

（7）向上取整：Math.ceil()

例：

var y=Math.ceil(9.34);

运行结果：

（8）向下取整：Math.floor()

例：

var z=Math.floor(9.01);

运行结果：

（9）取0-1之间的随机数（不包括1）：Math.random()

例：

var r=Math.random();

运行结果：

（10）parseInt方法也可以取整

例：

var l=parseInt(2.96);

运行结果：

（11）取两个值的随机整数:

<1>Math.floor(Math.random()*(max-min+1)+min)

<2>Math.round(Math.random()*(max-min)+min)

例：

   //封装一个函数  取两个数之间的随机整数
   function getRandom(min,max){
   return Math.floor(Math.random()*(max-min+1)+min);
   }

   document.getElementsByTagName('h1')[0].innerHTML=getRandom(200,500);
   document.getElementsByTagName('h2')[0].innerHTML=getRandom(20,50);

运行结果：

2.定时器

(1)每隔固定时间执行

<1>定义：setInterval（callback,time）

<2>移除：clearInterval（定时器）

(2)延迟固定时间执行

<1>定义：setTimeout（callback，time）

<2>移除：clearTimeout（定时器）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>
<body>
    <button>移除延时器</button>
</body>
<Script>
    // callback:回调函数：把函数当作一个参数传到另一个函数中
    // setInter(callback，time)  每隔固定时间代码执行一次
    var  n=0;
    var time1=setInterval(function(){
        n++;
        if(n==10){
         // 移除定时器
            clearInterval(time1);
        }
        console.log("hello 吃烤羊吗？");
    },1000);

    // setTimeout(callback,time)
    var time2=setTimeout(function(){
        alert("hello 我不吃");
    },2000);

    document.querySelector('button').onclick=function(){
        clearInterval(time2);
    }
</Script>
</html>

运行结果：

3.补充知识：变量和字符串拼接

(1)es5变量和字符串拼接：div.style.backgroundColor=rgb("+r+","+g+","+b+")

(2)es6模板字符串：div.style.backgroundColor=`rgb(${r},${g},${b})`

具体案例代码：随机变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机变色</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        button{
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 10px;
            border-radius: 5px;
            /* background-color: rgb(217,204,204); */
        }
    </style>
</head>
<body>
    <div></div>
    <button>变色</button>
</body>
<script>
    // 1.获取元素
    var div=document.querySelector('div');
    var btn=document.querySelector('button');
    // var colorArr=['red','green','blue','pink','tomato','black','white','orange','yellow','purple'];


    // 绑定点击事件
    btn.onclick=function(){
        // 数组索引取值范围[0,arr.length-1]
        // var r=Math.round(Math.random()*(colorArr.length-1));
        // div.style.backgroundColor=colorArr[Math.round(Math.random()*(colorArr.length-1))];
        var r=Math.round(Math.random()*255);
        var g=Math.round(Math.random()*255);
        var b=Math.round(Math.random()*255);
        console.log(r,g,b);
        // es5变量和字符串拼接
        // div.style.backgroundColor='rgba('+r+','+g+','+b+',.6)';
        // es6  模板字符串  ``
        div.style.backgroundColor=`rgb(${r},${g},${b})`;
    }
</script>
</html>

运行结果：

傻乎乎的小不点

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象的方法和定时器

(1)es5变量和字符串拼接：div.style.backgroundColor=rgb("+r+","+g+","+b+")(2)es6模板字符串：div.style.backgroundColor=`rgb(${r},${g},${b})`（9）取0-1之间的随机数（不包括1）：Math.random()（2）返回x的y次幂：Math.pow(x,y)（3）返回x的平方根：Math.sqrt(x)（1）取绝对值：Math.abs()（4）取最大值：Math.max()(1)每隔固定时间执行。
复制链接

扫一扫