isNaN+获取焦点与失去焦点

最新推荐文章于 2025-11-26 17:11:00 发布

原创最新推荐文章于 2025-11-26 17:11:00 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文详细探讨了JavaScript的isNaN()函数用法，涉及类型转换及实际应用场景。通过实例演示如何在表单验证中使用isNaN()检查数字输入，并解析面试题中关于typeof和typeoftypeof的疑惑。同时涵盖了前端开发和数据类型检查的关键知识点。

//isNaN() 判断非数字的，如果不是数字返回true，如果是数字返回false
//注意点：isNaN()方法会进行隐式数据类型类型转换
// console.log(isNaN(10))
// console.log(isNaN(‘66’))
// console.log(isNaN(‘a’))
// console.log(isNaN(‘120px’))
// console.log(isNaN(‘哈哈’))

    /*
        获取表单的值
        + 通过元素.value属性
        获取元素的内容
        + 通过元素.innerHTML
        + 功能
          => 获取元素的内容
          => 可以设置元素内容
    */

    var tel = document.getElementById('tel')
    var des = document.getElementById('des')
    //console.log(des.innerHTML)
    //des.innerHTML = '请输入数字'

    //获取焦点
    // tel.onfocus = function(){
    //     console.log('获取焦点')
    // }
    //失去焦点事件
    tel.onblur = function(){
        var val = tel.value
        var res = isNaN(val)
        if(res){
            //console.log('不是数字')
            des.innerHTML = '你输入的不是数字，请重新输入'
        }else{
            //console.log('输入的是数字')
            des.innerHTML = '恭喜，输入正确√'
        }
    }

    //面试题：typeof typeof num 结果是多少？
    var num = 10
    console.log(typeof num)
    //注意点：先拿到执行结果，number数据类型，针对于这个类型本身就是string，所以结果是string类型，先执行的是后面的值
    console.log(typeof typeof num) //string
    console.log(typeof typeof typeof num) //string

    //console.log(typeof 'number')

    //表示判断数据类型
    console.log(typeof 10 == 'number')
    console.log(typeof 'a' == 'string')
    console.log(typeof true == 'boolean')