js执行原理
客户端与服务端
pc请求,给服务器,服务器响应后,把js脚本下载到pc端,'脱离'了服务端,本机会执行脚本(js). 除非服务端的js作了更新
js组成
<script type="javascript" src="外部链接js|前端框架"></script>
镂空的菱形:
<head>
<meta charset="utf-8" />
<title></title>
<script>
function abc(){
var rows=prompt("请入菱形的行数：","");
//转换整型
var row=parseInt(rows);
while(row%2==0){
row= prompt("请入菱形的行数：","");
row=parseInt(row);
}
//打印上部份
var uprow=(row+1)/2;
for(var i=1;i<=uprow;i++){
//占位
for(var j=1;j<=uprow-i;j++){
document.write(" ");
}
for(var k=1;k<=2*i-1;k++){
//document.write("*");
if(k==1||k==2*i-1){
document.write("*");
}else{
document.write(" ");
}
}
//换行
document.write("<br/>");
}
//打印下部份
var downrow=row-uprow;
for(var i=downrow;i>=1;i--){
//占位
for(var j=1;j<=downrow-i+1;j++){
document.write(" ");
}
for(var k=1;k<=2*i-1;k++){
//document.write("*");
if(k==1||k==2*i-1){
document.write("*");
}else{
document.write(" ");
}
}
//换行
document.write("<br/>");
}
}
</script>
</head>
return 用法：
<head> <meta charset="UTF-8"> <title></title> <script> function abc(email){ //1.@ if(email.indexOf("@")==-1){ alert("邮箱地址必须包含@"); return;//停在当前的位置 } //2.点与@ 位置 if(email.lastIndexOf(".")<email.indexOf("@")){ alert("邮箱中@必须在.之前!"); return; } alert("正确的电子邮箱："+email); } </script> </head> <body> <input type="button" value="测试" onclick="abc(prompt('请输入电子邮箱:',''));"/> </body> |
js操作BOM
BOM：浏览器对象模型
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构------(节点)
1.location:有关当前URL的信息
2.history:有关客户访问过的URL信息
history作用:前进和后退 前提条件是看浏览器的箭头能否点击!
history.forward()======>history.go(1)---前进
history.back()=======>history.go(-1)----返回
confirm():提示用户,是否确认?
function aaa(){ var cfm=confirm("是否要删除此条数据？");//交互 true false //alert(cfm); if(cfm){ alert("已删除......"); }else{ alert("不想删除了......."); } }
|
属性名称 | 说 明 |
height、width | 窗口文档显示区的高度、宽度。以像素计 |
left、top | 窗口的x坐标、y坐标。以像素计 |
toolbar=yes | no |1 | 0 | 是否显示浏览器的工具栏。黙认是yes |
scrollbars=yes | no |1 | 0 | 是否显示滚动条。黙认是yes |
location=yes | no |1 | 0 | 是否显示地址地段。黙认是yes |
status=yes | no |1 | 0 | 是否添加状态栏。黙认是yes |
menubar=yes | no |1 | 0 | 是否显示菜单栏。黙认是yes |
resizable=yes | no |1 | 0 | 窗口是否可调节尺寸。黙认是yes |
titlebar=yes | no |1 | 0 | 是否显示标题栏。黙认是yes |
fullscreen=yes | no |1 | 0 | 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式 |
基本格式用法:
window.open("other.html","other","height=250px,width=300px,top=100px,left=100px,toolbar=yes,scrollbars=yes,resizable=yes");
js启动时间:
clearTimeout():让时间停止下来
js实现下拉列表框循环的方式实现从1900-2018
js全选:
反选:
<html> <head> <meta charset="utf-8" /> <title></title> <script> function abc(){ var aihao=document.getElementsByName("aihao"); for(var i=0;i<aihao.length;i++){ if(aihao[i].checked==true){ aihao[i].checked=false; }else if(aihao[i].checked==false){ aihao[i].checked=true; } } } </script> </head> <body> <input type="checkbox" name="aihao" /> <input type="checkbox" name="aihao" /> <input type="checkbox" name="aihao" /> <input type="checkbox" name="aihao" /> <a href="javascript:abc();">反选</a> </body> </html> |
|------1：document.getElementById(); 针对单个元素（节点）
|------2：document.getElementsByName();多个
|------3：document.getElementsByTagName();表单提交的时候，<input type="text"/>
|------4:混用
js内置对象
Math对象 random() ceil() floor()
<script> function abc(){ //随机数 //var r=Math.random();//介于0~1之间 var r=Math.floor(Math.random()*10); //var r=Math.floor(21.123);//向下取整不变 //var r=Math.ceil(21.012);//向上取整加一个 document.getElementById("mydiv").innerHTML=r; } </script> |
Math+Array
function abc(){ var arr=new Array("小明","小红","红红","小小","大大","小王","jack","rose","老王","王王"); //随机数 var r=Math.floor(Math.random()*10); document.getElementById("mydiv").innerHTML=arr[r]; } |
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
