首页 > 编程语言 >JavaScript对象_Global和案例1_点灯开关

JavaScript对象_Global和案例1_点灯开关

时间:2022-11-22 21:02:37浏览次数:40  
标签:JavaScript 点灯 Global NaN write flag let document

JavaScript对象_Global:

Global:

1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();

2.方法:

encodeURI() : url编码

decodeURI() : url解码

encodeURIComponent() : url编码,编码的字符更多

decodeURIComponent() : url解码

parseInt():将字符串转为数字

逐—判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number

isNaN():判断一个值是否是NaN

NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

eval:讲avaScript字符串,并把它作为脚本代码来执行。

3. URL编码

传智播客=%E4%BC%AB%E6%99%BA%E6%92%AD%E5%AE%A2

代码实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JSGlobal对象</title>
    <!--内部JS-->
    <script>

        //定义https路径的编码
        let str = "http://www.baidu.com?wd=传智博客";
        let encode = encodeURI(str);
        document.write(encode+"<br>");
        let s = decodeURI(encode);
        document.write(s+"<br>");//传智播客

        //这是收看解码的https的url
        let str1 = "http://www.baidu.com?wd=传智博客";
        let encode1 = encodeURIComponent(str1);
        document.write(encode1+"<br>");
        let s1 = decodeURIComponent(encode);
        document.write(s1+"<br>");//传智播客

        //先要猜一次
        let str = "a234abc";
        let number = parseInt(str);
        //alert(number+1);

        let a = NaN;

        //最后输出
        document.write(a == NaN);
        document.write(isNaN(a));

        let jscode = "alert(123)";

    </script>
</head>
<body>

</body>
</html>








案例1_点灯开关:
分析:
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片

规则:
如果灯是开的on,切换图片为off
如果灯是关的off,切换图片为on
使用标记flag来完成
代码实现:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例&电灯开关</title>
</head>
<body>

    <img src="../img/kejifengdongtai.gif" id="light">

<!--内部JS-->
<script>

    //1.获取图片对象
    let light = document.getElementById("light");

    let flag = false;//代表灯是灭的。图片

    //2.绑定单击事件
    light.onclick = function () {
        if (flag){//判断如果灯是开的,则灭掉
            light.src =
            flag = false;

        }else {
            //如果灯是灭的,则打开

            flag = true;
        }
    }
</script>
</body>
</html>

 




 

标签:JavaScript,点灯,Global,NaN,write,flag,let,document
From: https://www.cnblogs.com/hungui/p/16916420.html

相关文章

  • javascript-代码随想录训练营day6
    242.有效的字母异位词题目链接:https://leetcode.cn/problems/valid-anagram/题目描述:给定两个字符串s和t,编写一个函数来判断t是否是s的字母异位词。注意:若s......
  • 这11个JavaScript小技巧,你在大多数教程中是找不到的!
    英文原文| ​​https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d​​​当我开始学习JavaScript时,我把我在别人的代......
  • JavaScript基础(二)
    JavaScript基础第04天笔记1-数组1.1数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据的集合,其中的每个数据被称作元素,在......
  • javascript - 练习题:事件练习 - 扫雷
    HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="w......
  • JavaScript:世界上误解最深的语言
    JavaScript:TheWorld'sMostMisunderstoodProgrammingLanguageJavaScript:世界上误解最深的语言DouglasCrockfordwww.crockford.com翻译:袁晓辉JavaScript,akaMocha,a......
  • [收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
    用JAVASCRIPT就行了:假设你要打开A.HTM,弹出B.HTM、C.HTM,可以这样写:A.HTM加上---------------<HEAD> ....... <SCRIPTLANGUAGE="JavaScript"> window.open('b.htm','_bl......
  • Javascript Event Loop
    JavascriptEventLoop是什么Javascript执行的时候是单线程的,所以一些耗时的操作需要启用其它的线程去处理,这样才不会阻塞整个线程的执行,这种任务我们称为异步任务。然后......
  • JavaScript DOM 编程
    DOM-D:文档-html文档或xml文档-O:对象-document对象的属性和方法-M:模型-DOM是针对xml的基于树的API-DOM树:节点的层次-DOM把一个文档表示为一颗家谱树(父,子,......
  • 【JavaScript 教程】第六章 数组17—flatMap() :对每个元素执行映射函数并将结果展平
    英文 | https://www.javascripttutorial.net/译文|杨小爱在上节,我们学习如何使用 JavaScriptArrayflat()方法来展平数组,错过的小伙伴可以点击文章《​​【JavaScrip......
  • 5 个JavaScript 中 Slice()的用例
    英文|https://betterprogramming.pub/5-use-cases-for-slice-in-javascript-13462f2e177f翻译|杨小爱slice()方法将数组部分的副本返回到新的数组对象中。这个对象是从......