js

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("&nbsp;&nbsp;");

                            }

                            for(var k=1;k<=2*i-1;k++){

                                  //document.write("*");

                                  if(k==1||k==2*i-1){

                                       document.write("*");

                                  }else{

                                       document.write("&nbsp;&nbsp;");

                                  }

                            }

                            //换行

                            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("&nbsp;&nbsp;");

                            }

                            for(var k=1;k<=2*i-1;k++){

                                  //document.write("*");

                                  if(k==1||k==2*i-1){

                                       document.write("*");

                                 }else{

                                       document.write("&nbsp;&nbsp;");

                                  }

                            }

                            //换行

                            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("不想删除了.......");

                }

            }

 

属性名称

     

heightwidth

窗口文档显示区的高度、宽度。以像素计

lefttop

窗口的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>

|------1document.getElementById(); 针对单个元素(节点)

|------2document.getElementsByName();多个

|------3document.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];

                 }




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

brid_fly

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值