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

た入场券 2023-06-28 09:54 11阅读 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**

**案例：利用CSS和html做出一个QQ登陆的页面。**

<style type="text/css">
    #div1{ 
        width:300px;
        height:300px;
        border:1px solid #F00;
        margin-left:500px;
        margin-top:200px;
        background-image:url(05.%E7%B4%A0%E6%9D%90/1.jpg);
        background-repeat:no-repeat;
        background-position:top center}
    #userDiv{ 
        margin-left:50px;
        margin-top:100px;
        }
    #passwordDiv{ 
        margin-left:50px;
        margin-top:10px;
        }
    #btnDiv{ 
        margin-left:100px;
        margin-top:10px;
        }
    #inputUser{ 
        background-image:url(05.%E7%B4%A0%E6%9D%90/head.png);
        background-repeat:no-repeat;
        background-position:center left;
        padding-left:30px;}
    #inputpassword{ 
        background-image:url(05.%E7%B4%A0%E6%9D%90/key.jpg);
        background-repeat:no-repeat;
        background-position:center left;
        padding-left:30px;}
    </style>
    </head>
    <body>
    <div id="div1">
        <form>
            <div id="userDiv">用户名:<input type="text" id="inputUser" /></div>
            <div id="passwordDiv">密  码:<input type="password" id="inputpassword" /></div>
            <div id="btnDiv"><input type="button" value="登陆"/><input type="button" v````
    lue="注册"/></div>
        </form>
    </div>
    </body>

**流程控制语句**

<script type="text/javascript">
    /* if语句 if(表达式){ 语句 }else{ 语句 } 条件可以是： 布尔值：true：成立 ； false:不成立 number：非0：成立； 0： 不成立 string: 非空字符串： 成立 ； 空字符串： 不成立 object: 非null: 成立； null：不成立 swtich语句 swtich(变量){ case 选项1: 语句; break; 如果不break，就会继续下面选项的语句 case 选项2:： 语句; break; default: 默认; } 注意:在js中的switvch语句中的case选项的值: 1.可以选择常量,String类型或者number类型 2.case选项中的值还可以是变量 3.在java中case选项中的值只能是常量不能是变量 4.case选项还可以是表达式 for语句： for(初始化语句;条件判断语句;流程控制语句){ 循环体语句 } 需求：页面上打印十次helloworld 需求：对1-100进行求和 while语句 初始化语句 while(条件判断语句){ 循环体语句; 条件控制语句; } 执行流程： 需求：在页面上打印十次helloworld; do-while语句 初始化语句; do{ 循环体语句; 条件控制语句; }while(判断条件语句) 需求：在页面上打印十次helloworld; */
    /* if(null){ alert("条件成立"); }else{ alert("条件不成立"); }*/
        /* var choice = "b"; var b = "b"; switch(choice){ case "a": alert("您选择了a"); break; case b: alert("您选择了b"); break; case "c": alert("您选择了c"); break; default: alert("您的选项不存在"); break; }*/
        /* var age = 19; switch(true){ case age>=18: alert("你是成年人"); break; case age<18: alert("未成年人禁止入内"); break; }*/
        //需求：页面上打印十次helloworld
        /* for(var i=0;i<10;i++){ document.write("helloword"); document.write("<br>"); } //需求：对1-100进行求和 var sum = 0; for(var i = 1;i<=100;i++){ sum+=i; } document.write(sum);*/
        /* var i = 0; while(i<10){ document.write("helloword"); document.write("<br>"); i++; }*/
        var i = 0;
        do{ 
            document.write("helloword");
            document.write("<br>");
            i++;
            }while(i<10);
    </script>
    </head>
    <body>
    </body>

**with语句：方便函数的调用**  
with（对象）\{  
直接写对象的方法\}

with(document){ 
        var i = 0;
        do{ 
            write("helloword");
            write("<br>");
            i++;
            }while(i<10);
           }

**js中的函数中的定义**

<script type="text/javascript">
    /* js中的函数定义: function 函数名(形式参数列表){函数体} 函数定义中需要注意的问题: 1.在js中函数的定义的参数列表不需要写var 2.js中的函数可以有返回值,无需声明返回值类型,只需要通过return这个关键字返回结果即可 3.js中没有方法重载的概念,如果方法名相同,后面的方法就会覆盖前面的方法 4.在我们js中的每一个函数中都存在一个arguments数组,这个数组就是用来接受我们的所有的实际参数的,接收完毕之后 给我们的函数的形式参数从左到右依次赋值 js函数的调用: 1.如何调用:函数名称(实际参数) 2.实际参数个数<形式参数个数 NaN 3.实际参数个数>形式参数个数 会拿着你的所有的实际参数给你的形式参数从左到右依次赋值,后面多余的形式参数直接舍弃 */
        //定义一个函数,a和b的加法
        function add(a,b){ 
            alert(arguments.length);
            var res = a+b;
            return res;
            }
        //定义一个3个数相加的add方法
        /* function add(a,b,c){ var res= a+b+c;//1+2+c; return res; }*/
        var sum = add(2,2,3);
        document.write(sum);
    </script>

**查询每个月份对应的天数**  
添加一个函数

<script type="text/javascript">
        //当我的按钮的单击事件被触发以后需要执行的操作
        function checkMonth(){ 
            //获取单行输入域内的用户输入的月份值
            var month = document.getElementById("month").value;
            //使用if语句做判断,给出相应的提示
            /* 1,3,5,7,8,10,12 大月 31天 4,，6,9,11 小月 30天 2 小小月 28天 */
       if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){      
                alert("该月有31天");
                }else if(month==4||month==6||month==9||month==11){ 
                    alert("该月有30天");
                    }else if(month==2){ 
                        alert("该月有28天");
                        }else{ 
                            alert("星球上没有这个月份");
                            }
            }
    </script>
    </head>
    <body>
    请输入你需要查询的月份:<input type="text" id="month"/>
    
    <input type="button" value="查询天数" onclick="checkMonth()" />
    </body>

**[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 条评论，11人围观）

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

相关阅读

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

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

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

相关 Python中的异常处理：常见误区与实用案例？

在Python编程中，异常处理是一种机制，用于捕获和处理程序运行时可能出现的错误。以下是一些常见的误区和实用案例： 1. **误区：过度使用except子句** 如

小鱼儿/ 2025年02月06日 04:33/ 0 赞/ 115 阅读

相关 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 阅读

相关 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 赞/ 12 阅读

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

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

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

相关 javascript常见习题（一）

1、元素选择器 getElementById （获取单个标签） getElementsClassName（获取一个集合） getElementsByTagName（获

落日映苍穹つ/ 2022年12月16日 06:41/ 0 赞/ 272 阅读

相关 javascript 常见问题

1 apend 和 appendChild <!doctype html> <html lang="en"> <head>

以你之姓@/ 2022年04月16日 05:40/ 0 赞/ 320 阅读

相关 JavaScript 中常见的数组方法（实用干货）

我们首先了解数组在Js中的定义 1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址 2、关

小灰灰/ 2021年07月24日 17:14/ 0 赞/ 576 阅读