js-杂记
js可计算传值
<p>点击按钮计算 x 的值.</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { y=5; z=2; x=y+z; document.getElementById("demo").innerHTML=x; }
判断并显示数据
<p>点击按钮检测年龄。</p> 年龄:<input id="age" value="18" /> <p>是否达到投票年龄?</p> <button onclick="myFunction()">点击按钮</button> <p id="demo"></p> <script> function myFunction() { var age1,vote; age1=document.getElementById("age").value; vote=(age<18)?"年龄太小":"年龄已达到"; document.getElementById("demo").innerHTML=vote; } </script>
if else判断提示
<p>点击这个按钮,获得基于时间的问候。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x=""; var time=new Date().getHours(); if (time<20){ x="Good day"; } else{ x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script>
switch判断
<p>点击下面的按钮,会显示出基于今日日期的消息:</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x; var d=new Date().getDay(); switch (d) { case 6:x="今天是星期六"; break; case 0:x="今天是星期日"; break; default: x="上班周,期待周末"; } document.getElementById("demo").innerHTML=x; } </script>
for循环输出
function myFunction(){ var x=""; for (var i=0;i<5;i++){ x=x + "该数字为 " + i + "<br>"; } document.getElementById("demo").innerHTML=x; }
while循环输出
cars=["BMW","Volvo","Saab","Ford"]; var i=0; while (cars[i]){ document.write(cars[i] + "<br>"); i++; }
break 语句可用于跳出循环。
continue 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 该例子跳过了值 3:
function myFunction(){ var x="",i=0; for (i=0;i<10;i++){ if (i==3){ continue; } x=x + "该数字为 " + i + "<br>"; } document.getElementById("demo").innerHTML=x; }
操作符类型
<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" + typeof NaN + "<br>" + typeof false + "<br>" + typeof [1,2,3,4] + "<br>" + typeof {name:'john', age:34} + "<br>" + typeof new Date() + "<br>" + typeof function () {} + "<br>" + typeof myCar + "<br>" + typeof null; </script> 结果 string number number boolean object object object function undefined object
catch检测错误
<p>请输出一个 5 到 10 之间的数字:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">测试输入</button> <p id="message"></p> <script> function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值为空"; if(isNaN(x)) throw "不是数字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "错误: " + err; } } </script>
表单提交显示结果
<script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
验证输入值
<p>输入数字并点击验证按钮:</p> <input id="id1" type="number" max="100"> <button onclick="myFunction()">验证</button> <p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "输入的值太大了"; } else { txt = "输入正确"; } document.getElementById("demo").innerHTML = txt; } </script>
代码规范
变量名推荐使用驼峰法来命名(camelCase): 通常运算符 ( = + - * / ) 前后需要添加空格: 通常使用 4 个空格符号来缩进代码块: 一条语句通常以分号作为结束符。 复杂语句的通用规则: 将左花括号放在第一行的结尾。 左花括号前添加一空格。 将右花括号独立放在一行。 不要以分号结束一个复杂的声明。 对象定义的规则: 将左花括号与类名放在同一行。 冒号与属性值间有个空格。 字符串使用双引号,数字不需要。 最后一个属性-值对后面不要添加逗号。 将右花括号独立放在一行,并以分号作为结束符号。 短的对象代码可以直接写成一行: 一般很多代码语言的命名规则都是类似的,例如: 变量和函数为驼峰法( camelCase) 全局变量为大写 (UPPERCASE ) 常量 (如 PI) 为大写 (UPPERCASE ) 使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的): HTML 文件后缀可以是 .html (或r .htm)。 CSS 文件后缀是 .css 。 JavaScript 文件后缀是 .js 。 大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。 其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。 你必须保持统一的风格,我们建议统一使用小写的文件名。
鼠标监听
<body> <p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p> <button id="myBtn">点我</button> <p id="demo"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "Moused over!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!<br>" } </script> </body>