JavaScript实用案例及常见问题（二）

系统管理员 2023-06-28 09:55 19阅读 0赞

**[JavaScript（入门）：][JavaScript]  
https://blog.csdn.net/Veer\_c/article/details/103894517  
[JavaScript实用案例与常见问题（一）：][JavaScript 1]  
https://blog.csdn.net/Veer\_c/article/details/103894959  
[JavaScript实用案例及常见问题（二）：][JavaScript 2]  
https://blog.csdn.net/Veer\_c/article/details/103895166**

**String中的方法的使用**

<script type="text/javascript">
    /* 1.String对象定义 方式1:var s1 = new String("hello"); 方式2:var s2 = "hello"; charAt(索引): 返回指定索引的内容 indexOf(字符串): 返回首次出现指定字符的索引位置 lastIndexOf(字符串): 返回最后出现指定字符的索引位置 fontcolor("red"): 直接给字符串添加颜色 split("字符串"): 使用指定字符串切割字符串，返回字符串数组 substring(start,end); 截取字符串，start：开始索引， end:结束索引 substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度 */
        var s1 = new String("hello");
        var s2 = new String("hello");
        document.write(s1==s2);
        document.write("<br>");
        //valueOf(),这个方法是取出对象中的内容
        document.write(s1.valueOf()==s2.valueOf());
        document.write("<br>");
        //创建字符串的方式2:直接赋值
        var s3 = "hello";
        var s4 = "hello";
        document.write(s3==s4);
        document.write("<br>");
        document.write("<hr>");
        //charAt(索引): 返回指定索引的内容
        document.write(s1.charAt(1));
        document.write("<br>");
        //indexOf(字符串): 返回首次出现指定字符的索引位置
        document.write(s1.indexOf("e"));
        document.write("<br>");
        //lastIndexOf(字符串): 返回最后出现指定字符的索引位置
        document.write(s1.lastIndexOf("l"));
        document.write("<br>");
        //fontcolor("red"): 直接给字符串添加颜色
        s3 = s3.fontcolor("red");
        document.write(s3);
        document.write("<br>");
        var s5 = "java-php-web";
        //split("字符串"): 使用指定字符串切割字符串，返回字符串数组
        var arr = s5.split("-");
        for(var i =0;i<arr.length;i++){ 
            document.write(arr[i]);
            document.write("<br>");
            }
        document.write("<br>");
        //substring(start,end); 截取字符串，start：开始索引， end:结束索引
        document.write(s4.substring(0,2));
        document.write("<br>");
        //substr(start,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
        document.write(s4.substr(0,2));
    </script>

**boolean对象和Number对象的区别：**

<script type="text/javascript">
        //Boolean对象
        var b1 = new Boolean(true);
        var b2 = new Boolean(true);
        document.write(b1==b2);
        document.write("<br>");
        document.write(b1.valueOf()==b2.valueOf());
        document.write("<br>");
        //Number对象
        var n1 = new Number(10);
        //document.write(n1);
        var n2 = new Number(10);
        document.write(n1==n2);
        document.write("<br>");
        document.write(n1.valueOf()==n2.valueOf());
    </script>

**Math中的一些方法的使用：**

<script type="text/javascript">
    /* Math对象 常用的方法： 1）ceil()： 向上取整。 如果有小数部分的话，直接+1 2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位 3) round(): 四舍五入取整。满5进一 4）random(): 生成一个随机的0-1的小数 .包含0，不包含1 5）max(): 返回最大值 6）min(): 返回最小值 var num = 3.50; document.write(Math.ceil(num)+"<br/>"); document.write(Math.floor(num)+"<br/>"); document.write(Math.round(num)+"<br/>"); document.write(Math.round(Math.random()*100)+"<br/>"); document.write(Math.max(10,6,54,23,76)+"<br/>"); document.write(Math.min(10,6,54,23,76)+"<br/>"); */
        var i = 3.14;
        //1）ceil()： 向上取整。 如果有小数部分的话，直接+1
        document.write(Math.ceil(i));
        document.write("<br>");
        //2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
        document.write(Math.floor(i));
        document.write("<br>");
        //3) round(): 四舍五入取整。满5进一
        document.write(Math.round(i));
        document.write("<br>");
        //4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
        document.write(Math.random());
        document.write("<br>");
        //5）max(): 返回最大值
        document.write(Math.max(2,3,5,7));
        document.write("<br>");
        //6）min(): 返回最小值 
        document.write(Math.min(2,3,5,7));
    </script>

**猜数字游戏的案例，网页版**

<script type="text/javascript">
        //生成随机数
        var num = Math.floor(Math.random()*100+1);
        alert(num);
        function checkNumber(){ 
            //1.获取输入狂内部输入的数字
            var inputNumber = document.getElementById("inputNumber").value;
            //将数字的类型进行转换
            inputNumber = parseInt(inputNumber);
            //做if判断并给出提示
            if(inputNumber>num){ 
                alert("大了");
                }else if(inputNumber<num){ 
                    alert("小了");
                    }else if(inputNumber==num){ 
                        alert("对了");
                        }
            }
    </script>
    </head>
    <body>
    请输入你猜测得数字:<input type="text" id="inputNumber" />
    <input type="button" onclick="checkNumber()" value="猜数字" />
    </body>

**Data对象及方法的使用**

<script type="text/javascript">
        //创建一个date对象
        var date = new Date();
        document.write(date);
        document.write("<br>");
        //在java中我们使用日期的格式化对象SimapleDateFormat() 给一个模式:yyyy-MM-dd 
        //document.write(date.getYear());
        document.write("<br>");
        //获取年份
        document.write(date.getFullYear()+"年");
        //获取月份
        document.write(1+date.getMonth()+"月");
        //获取日期
        document.write(date.getDate()+"日  ");
        //获取时
        document.write(date.getHours()+"时");
        //获取分
        document.write(date.getMinutes()+"分");
        //获取秒
        document.write(date.getSeconds()+"秒");
    </script>

**案例：做一个网页时钟：**

<script type="text/javascript">
        //创建一个获取当前时间的方法
        function getTime(){ 
            //获取span标签对象
            var spanTime = document.getElementById("sapnTime");
            //创建日期对象
            var date = new Date();
            //获取年月日,时分秒进行字符串拼接
            var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
            //给标签体设置内容,innerHTML这个属性
            spanTime.innerHTML=time;
            }
        //调用设置时间的方法
        //getTime();//这样的方式对上面设置时间的方法只调用了一次,所以我们的时间无法实现动态的设置变化
        //如果需要让时间动起来的话,我们需要每隔一秒调用getTime()这个方法一次
        window.setInterval("getTime()",1000);
        //参数1:调用的函数名称 参数2:每隔多久调用一次,调用的次数没有限制
    </script>

**js中的数组问题：**

<script type="text/javascript">
        /* js中数组的创建方式: 方式1:用new的方式创建数组 1.1:var arr = new Array(3); 创建数组指定长度 1.2 var arr = new Array(); 创建数组不指定长度 1.3 var arr = new Array("hello",100,200); 创建数组并给数组的元素赋值 方式2:直接赋值 var arr = [100,"hello",200]; 数组创建需要注意: 1.在js中数组的长度是可变的,他可以根据添加进来的多出来的元素进行自动的扩容 如果早java中是不可以的,会出现数组索引越界异常 2.js中的数组中可以添加多个不同类型的元素 常用的方法： join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串 reverse(): 反转数组中的元素 */
        //1.1:var arr = new Array(3);
        var arr = new Array(3);
        arr[0] = 100;
        arr[1] = 200;
        arr[2] = 300;
        arr[3] = 400;
        //1.2 var arr = new Array(); 创建数组不指定长度
        var arr2 = new Array();
        arr2[0] = 100;
        arr2[1] = true;
        arr2[2] = "hello";
        //1.3 var arr = new Array("hello",100,200);
        var arr3 = new Array(100,200,300);
        //方式2:创建数组,并给数组直接赋值不需要new
        var arr4 = [100,200,"world"];
        //遍历数组
        for(var i=0;i<arr4.length;i++){ 
            document.write(arr4[i]);
            document.write("<br>");
            }
        document.write("<hr>");
        //join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符
        var arr5 = ["jave","php","web"];
        var str = arr5.join("-");
        document.write(str);
        document.write("<br>");
        //reverse(): 反转数组中的元素
        arr5 = arr5.reverse();
        for(var i=0;i<arr5.length;i++){ 
        document.write(arr5[i]);
        document.write("<br>");
        }
    </script>

**[JavaScript（入门）：][JavaScript]  
https://blog.csdn.net/Veer\_c/article/details/103894517  
[JavaScript实用案例与常见问题（一）：][JavaScript 1]  
https://blog.csdn.net/Veer\_c/article/details/103894959  
[JavaScript实用案例及常见问题（二）：][JavaScript 2]  
https://blog.csdn.net/Veer\_c/article/details/103895166**

[JavaScript]: https://blog.csdn.net/Veer_c/article/details/103894517
[JavaScript 1]: https://blog.csdn.net/Veer_c/article/details/103894959
[JavaScript 2]: https://blog.csdn.net/Veer_c/article/details/103895166

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL事务处理常见问题：七个实用案例解读

在MySQL的事务处理过程中，可能会遇到各种各样的问题。以下是我为你整理的七个实用案例，每例都针对一个常见的问题进行了解读。 1. 持久化失败：如果事务中的某个SQL语句涉及

浅浅的花香味﹌/ 2025年02月09日 00:18/ 0 赞/ 63 阅读

相关 Oracle数据迁移中的常见问题：二十个实用案例

在进行Oracle数据库迁移时，可能会遇到一些问题。以下是20个实用案例，帮助您理解并解决这些常见的问题： 1. 数据一致性问题：如何确保迁移到的新环境中，数据的一致性。

谁践踏了优雅/ 2025年01月21日 15:42/ 0 赞/ 89 阅读

相关 MySQL集群配置问题：实用案例及解决策略

MySQL集群配置是一种优化数据库性能和容错的手段。以下是一个实用案例和解决策略： **案例：** 假设你有一个大型电子商务网站，每天处理大量订单和用户交互。为了应对高负载、

怼烎@/ 2025年01月02日 07:00/ 0 赞/ 105 阅读

相关抖音用户常见问题分析：二十个实用案例解析

1. **账户注册和登录问题**： - 案例：新用户误填了验证码。 - 解决方案：提供清晰的注册流程，以及及时的验证提示。 2. **视频上传与处理问题**：

比眉伴天荒/ 2024年12月20日 17:18/ 0 赞/ 195 阅读

相关 JavaScript核心之Web APIs实用案例

课程简介：本课程主要讲解DOM、BOM操作、网页特效、正则表达式、本地存储等知识点，拒绝冷偏知识点，结合案例教学，让知识点更实用。课程亮点： 1. pink老师主讲

梦里梦外;/ 2024年03月30日 11:27/ 0 赞/ 162 阅读

相关 mixins的实用案例和常见问题

文章目录 mixins介绍 mixins局部使用和使用同名钩子函数的执行顺序看源码：

Bertha 。/ 2023年07月13日 03:54/ 0 赞/ 90 阅读

相关三元运算符要点及实用案例

使用格式： (条件表达式)？表达式1：表达式2；运算规则： a) 判断条件表达式，结果为一个布尔值。 b) true，运算结果为表达式1 c) fals

心已赠人/ 2023年07月02日 11:26/ 0 赞/ 18 阅读

相关 JavaScript实用案例及常见问题（二）

[JavaScript（入门）：][JavaScript] https://blog.csdn.net/Veer\_c/article/details/103894517

系统管理员/ 2023年06月28日 09:55/ 0 赞/ 20 阅读

相关 JavaScript实用案例与常见问题（一）

[JavaScript（入门）：][JavaScript] https://blog.csdn.net/Veer\_c/article/details/103894517

た入场券/ 2023年06月28日 09:54/ 0 赞/ 11 阅读

相关最通俗易懂的JavaScript实用案例

> 前言:"人生最大的喜悦是每个人都说你做不到，你却完成它了！"你好！我是梦阳辰！快和我一起学习起来吧! 如果你没接触过JavaScript：以下文章对你有帮助。 [最通俗

Dear 丶/ 2023年03月13日 05:21/ 0 赞/ 169 阅读