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

最新推荐文章于 2022-10-20 16:43:43 发布

Veer_c

最新推荐文章于 2022-10-20 16:43:43 发布

阅读量7k

点赞数 7

分类专栏：成长之路文章标签： java javascript js 数据库 js要点

本文链接：https://blog.csdn.net/Veer_c/article/details/103895166

版权

成长之路专栏收录该内容

39 篇文章 2 订阅

订阅专栏

JavaScript（入门）：
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript实用案例与常见问题（一）：
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript实用案例及常见问题（二）：
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()+"日&nbsp;&nbsp;");
    //获取时
    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()+"&nbsp;&nbsp;"+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>

Veer_c

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实用案例及常见问题（二）

String中的方法的使用<script type="text/javascript">/*1.String对象定义方式1:var s1 = new String("hello");方式2:var s2 = "hello";charAt(索引): 返回指定索引的内容indexOf(字符串): 返回首次出现指定字符的索引位置lastIndexOf(字符串): 返回最后出现...
复制链接

扫一扫