JavaScript进阶

最新推荐文章于 2025-05-12 22:41:49 发布

liwangdeng

最新推荐文章于 2025-05-12 22:41:49 发布

阅读量341

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/liwangdeng/article/details/123183630

版权

本文深入探讨JavaScript的函数用法，包括函数的定义、返回值、参数传递、高阶函数和箭头函数的使用。此外，还介绍了JavaScript中的window对象、location对象以及定时器的运用，展示了如何创建简易计算器和抽奖器的实现。通过实例，详细解析了JavaScript中的时间处理、数学运算以及DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本期内容思维图

函数
1.函数一定有返回未定义undefined
2.可以写自己的返回
3.return可以中断函数的运行
4.可以带参,不需要指定参数的类型,参数可以任意传,默认为undefined
5.函数的返回值可以是任意类型

<script>
function fa(a){
        console.log("Hello")
        if(a){ //为真
            return "yes"
        }
        return false
    }
</script>

匿名函数和调用的方式

<script>
    (function (){
       
    })();
</script>

函数的调用与java相似

<script>
console.log(fa(1,2,3,4,5,6))
</script>

高阶函数（将函数作为参数传入函数）

<script>
function fa(a){
console.log(a)
}

function fb(a,b){
        return a(b)
    }

    fb(fa,"1")
</script>

箭头函数（普通函数的简写）

<script>
var fb=()=>{

}
</script>

简易计数机的制作

1.button按钮

2.disabled禁用

3.function函数

4.onclick点击事件

5.value数据存放

<body>
<p>第一个值: <input type="text" id="a1"></p>    //设置文本框
<p>第二个值: <input type="text" id="a2"></p>    //设置文本框
<p>结果: <input type="text" id="a3" disabled></p>     //设置结果文本框
<p>
    <button onclick="c1()">+</button>      //onclick类似于java中的点击事件，点击调用c1函数
    <button onclick="c2()">-</button>      //与上面类似
    <button>*</button>
    <button>/</button>
</p>
<script>
 function c1(){
        var a=a1.value;                    //文本框储存数据在value中
        var b=a2.value;
        var c=parseInt(a)+parseInt(b)      //parseInt将string->unmber
        if(isNaN(c)){                      //isNaN是非数字
            a3.value="输入错误"
            return
        }
        a3.value=c
    }
</script>
</body>

写一个函数接收两个参数返回他们的和

<script>
function fn01(a, b) {
        return a + b
    }
</script>

window对象是整个js中最大的对象

history 历史记录

1.history.back()后退

2.history.forward()前进

3.history.go

<script>
//history.go(1)正数前进负数后退
 function back(){
        history.back()     //网页后退
    }

    function forward(){
        history.forward()    //网页前进
    }
</script>

4.location.href 网页跳转

5.location.reload 网站刷新

<body>
<button onclick="f1()">点我</button>   //设置按钮添加点击事件
<script>
function f1(){
 //去百度
  location.href="https://www.baidu.com"   //添加百度网址
}
</script>
</body>

window.xx（）

新开窗口 window.open("index.html")

定时器setTimeout

清除clearTimeout

<script>
 setTimeout(function (){
        alert("NM炸了")   //提示框
    },30000)         //毫秒数3秒
</script>

循环定时和清除

setInterval 循环

clearInterval 清除循环

<script>
 var a=0;
    //i是定时器的编号
    var i=setInterval(function (){     //循环与清除
        a++
        console.log("NM炸了")
        if(a==10){
            clearInterval(i)
        }
    },1000)
</script>

内置对象

1.textContent 控制文本框，不识别html语句

2.innerHTML 识别html语句

3.Date 时间

toLocaleString 时间日期

toLocaleDateString 拿日期

toLocaleTimeString 拿时间

<bady>
<h3 id="h3"></h3>
<script>
setInterval(()=>{
        //textContent不识别html语句
        h3.textContent=new Date()
        h3.innerHTML="<kbd>"+new Date().toLocaleTimeString()+"</kbd>"  //求时间
    },1000)
</script>
</bady>

4.Math

<script>
    console.log(Math.max(1,2,3,4,5,6,7))  //最大值
    console.log(Math.min(1,2,3,4,5,6,7))  //最小值
    console.log(Math.ceil(1.99))          //向上取整
    console.log(Math.floor(1.99))         //向下取整
    console.log(Math.round(1.33))         //四舍五入
    console.log(Math.floor(Math.random()*10)+1) //随机1-10 random随机[0,1)
</script>

简易抽奖器的编写

 <style>

        p{
            perspective: 200px;
            transform-style: preserve-3d;
        }

        span{
            display: inline-block;
            width: 100px;
            height: 150px;
            background: black;
            color: yellow;
            font-size: 100px;
            text-align: center;
            line-height: 150px;
            text-shadow: 5px 5px 10px deeppink;
            border-radius: 10px;
            -webkit-text-stroke:1px blue;
        }

        .a{
            animation: ff 3s infinite;
        }

        @keyframes ff {
            0%{
                transform: rotate3d(-3,-6,-36,0deg);
            }
            100%{
                transform: rotate3d(1,1,1,360deg);
            }
        }

    </style>
</head>
<body>
<p>
    <!--输入框的值是value 其他的标签都是textContent,innerHTML-->
    <span id="a1">$</span>
    <span id="a2">$</span>
    <span id="a3">$</span>
</p>
<p>
    <button id="b1" onclick="start()">点我抽奖</button>
    <button onclick="stop()">点我取消</button>
</p>
<script>
    var key
    var count=1

    function start(){
        key=setInterval(()=>{
            var a=Math.floor(Math.random()*10)
            var b=Math.floor(Math.random()*10)
            var c=Math.floor(Math.random()*10)
            a1.textContent=a
            a2.textContent=b
            a3.textContent=c
            a1.className="a"
            a2.className="a"
            a3.className="a"
            //禁用按钮
            b1.disabled=true
        },10)
        count++
    }

    function stop(){
        clearInterval(key)
        var f=Math.floor(Math.random()*10)
        if(count%5==0){
            a1.textContent=f
            a2.textContent=f
            a3.textContent=f
        }
        var a=a1.textContent
        var b=a2.textContent
        var c=a3.textContent
        a1.className=""
        a2.className=""
        a3.className=""
        if(a==b&&b==c){
            alert("你中奖了")
        }
        b1.disabled=false
    }
</script>
</body>