1 系统内置函数OnClick点击事件OnLoad 页面加载事件OnSubmit 提交事件OnBlur失去焦点事件OnFocus 获得焦点事件OnChange 改变事件OnMouseover 鼠标移入事件OnMouseout 鼠标移出事件<script>window.onload = function(){var num = "123";alert(typeof(num))num = parseInt(num);//将字符串类型转换为number 用paresInt()的时候转变的字符串里面如果不是以数值开始的话,则返回NAN不是一个数字(是number)alert(typeof(num));}</script>var num =123.4num = parseInt(num);alert(num) /*123*/num = parseFloat(num);alert(num) /*123.0*/2window.onload = function(){alert("HELLO WORLD")confirm("是否确认注册")prompt("请输入信息")console.log("hello");}3window.onload = function(){alert("HELLO WORLD")confirm("是否确认注册")prompt("请输入信息")console.log(document.getElementById("txt"));}</script></head><body><input type="text" id="txt" /></body>4 window.onload = function(){alert("hello")var flag = confirm("是否确认")if(flag){alert("您点击的是确认")}else{alert("你点击的不是确认")return false;}}5 var str=prompt ("请输入信息")if(str=="admin"){alert("admin")}else{alert("输入错误")}2 点击事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function dianji(){var obj = document.getElementById("txt");//获取当id 为txt目标对象obj.style.fontSize = "50px";obj.style.color = "red";}function checkSex1(){alert(document.getElementById("sex1").value)}function checkSex2(){alert(document.getElementById("sex2").value)}function unload(){alert("unload")}</script></head><body onunload="unload()"><div id="txt" onclick="dianji()">//点击点击事件情人分手快乐!</div>性别:<input type="radio" name= "sex" id="sex1" onclick="checkSex1(this)" value="男" />男<br /><input type="radio" name= "sex" id="sex2" onclick="checkSex2(this)" value="女" />女</body></html>3 焦点事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function check(){if(document.getElementById("user").value.length>8){alert("用户名的长度不能大于8")}else{alert("用户名可用")}}function checkPwd(){if(document.getElementById("pwd").value.length>6){alert("密码长度不能大于6");}else{alert("密码可用")}}function Text(){document.getElementById("user").value="";}</script></head><body><form action="#">user : <input type="text" id='user'onblur="check();" onfocus="Text()" placeholder="请输入用户名" /><br /><br />pwd : <input type="password" id="pwd"onblur="checkPwd()" /><br /><br /></form></body></html>4 evaleval()运行以字符串形式表示的javascript代码串,并返回执行代码串后的结果。
例子:计算用户输入在文本框的表达式的计算结果。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function calc(){var express=document.getElementById("info").value;var result=eval(express);alert("输入在文本框的表达式的结果是:"+result);}</script></head><body><input type="text" id="info" /><input type="button" value="计算" id="btn" onclick="calc()"/> </body></html>5输入数据<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function dianji(){var obj=document.getElementById("txt")var valu =obj.value;//关键字不能一样alert(valu)}</script></head><body><input type="text" id="txt" /><input type="button" value="点击" onclick="dianji()" /></body></html>6 获得value的值第一种方法<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function check(){var inputObj = document.getElementById("txt");var txt = inputObj.value;var num = parseInt(txt);if(!isNaN(num)){if(txt<=60){alert("继续努力")}else{alert("及格了")}}else{alert("输入有误")}}</script></head><body><input type="text" id="txt" placeholder="请输入分数"/><br /><br /><input type="button" value="提交" onclick="check()"/> </body></html>第二种方法<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function checkScore(){varscore=document.getElementById("score").value;var resultScore = parseInt(score)if(resultScore>0){if(resultScore<=100){if(resultScore<60){alert("你完蛋了")}else if(resultScore<80){alert("及格了")}else{alert("书呆子")}}else{alert("成绩有误");}}}</script></head><body><input type="text" placeholder="输入成绩 " id="score" onblur="checkScore()"/></body></html>8 判断一个数值是不是数字isNaN(要判断的值);<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function check(){var val = document.getElementById("txt").value;var num = parseInt(val)if(isNaN(num)){alert("输入的不合法")}if(!isNaN(num)){alert("输入的是数字")}}</script></head><body><input type="text" id="txt" placeholder="请输入数字"/><br /><br /><input type="button" value="提交" onclick="check()"/> </body></html>9分支语句选择语句:根据选择的条件判断执行哪一段代码If语句:单分支的用法: if(“判断条件返回值是boolean类型的值“){代码块;}双分支语句:If(isNaN(num)){Alert(“您输入的不合法“)}else{Alert(“你输入的是数字“)}多分支语法:当一个判断条件不能满足我们的时候If(){}else if(){}else if(){}……else{}10 颜色选择器<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function chooseColor(){var bgObj = document.getElementById("bg")//在事件源对象所对应的html标签上增加一个要处理的//事件属性,让事件属性值等于处理该事件的函数名或程序代码,获得id元素var obj=document.getElementById("col")var val=obj.value//获得目标的数值var num = parseInt(val)//将字符转化为numberif(num==1){bgObj.style.background="red";}if(num==2){bgObj.style.background="yellow";}if(num==3){bgObj.style.background="green";}if(num==4){bgObj.style.background="blue";}}</script></head><body id="bg"><!--改变的是body的颜色-->请选择颜色:<select id="col"onchange="chooseColor()"><!--一次选一个,是一个整体,千万别忘了括号--><option value="0">请选择颜色</option><option value="1">红色</option><option value="2">黄色</option><option value="3">绿色</option><option value="4">蓝色</option></select></body></html>11 运算器第一种方法<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function jisuan(){varinputVal1=document.getElementById("txt1").value//第一个输入框的值varinputVal2=document.getElementById("txt2").value//第二个输入框的值varselectVal=document.getElementById("sel").value//获取符号的值if(selectVal=="+"){document.getElementById("txt3").value=parseInt(inputVal 1)+parseInt(inputVal2)}if(selectVal=="-"){document.getElementById("txt3").value=parseInt(inputVal 1)-parseInt(inputVal2)}if(selectVal=="*"){document.getElementById("txt3").value=parseInt(inputVal 1)*parseInt(inputVal2)}if(selectVal=="/"){document.getElementById("txt3").value=parseInt(inputVal 1)/parseInt(inputVal2)}}</script></head><body><input type="text" id="txt1" /><select id="sel"><option value="+">+</option><option value="-">—</option><option value="*">*</option><option value="/">/</option></select><input type="text" id="txt2" />=<input type="text" readonly="readonly" id="txt3"/><input type="button" value="计算" onclick="jisuan()" /></body></html>第二种方法<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function jisuan(){varinputVal1=document.getElementById("txt1").valuevarinputVal2=document.getElementById("txt2").valuevarselectVal=document.getElementById("sel").valueswitch(selectVal){case "+":document.getElementById("txt3").value=parseInt(inputVal 1)+parseInt(inputVal2);break;case "-":document.getElementById("txt3").value=parseInt(inputVal 1)-parseInt(inputVal2);break;case "*":document.getElementById("txt3").value=parseInt(inputVal 1)*parseInt(inputVal2);break;case "/":document.getElementById("txt3").value=parseInt(inputVal 1)/parseInt(inputVal2);break;}}</script></head><body><input type="text" id="txt1" /><select id="sel"><option value="+">+</option><option value="-">—</option><option value="*">*</option><option value="/">/</option></select><input type="text" id="txt2" />=<input type="text" readonly="readonly" id="txt3"/><input type="button" value="计算" onclick="jisuan()" /></body></html>12 三目运算符Boolean?第一个值:第二个值;Boolean类型返回true时则执行第一个<script>var str =2>3?"1不大于2":"1大于2";alert(str);</script>Switch(参数){Case 参数:语句块Break;Case 参数:语句块Break;Default;以上都不是}13 显示时间<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>/* var now =new Date();//当前的时间alert(now);var Dat =now.getDate();//当前的日子alert(Dat);var year = now.getFullYear();//年份alert(year)var month = now.getMonth()+1;//月份alert(month)var week =now.getDay();//几月alert(week)*/var now =new Date();var week = now.getDay();switch(week){case 1:case 2:case 3:case 4:case 5:alert("工作日");break;default:alert("休息日")break;}</script></head><body></body></html>14 onload事件onload和onunload事件onload 事件会在页面加载完成后立即发生用户关闭或刷新网页时触发onunload事件<script type="text/javascript">window.onload=function(){window.status=“欢迎光临";}</script><body onunload="alert('触发了onload事件')"></body>。