1. 云图网首页
  2. 技术专区
  3. 编程笔记

javascript（二）详解编程语言

• 编程笔记
1、新增输入框

   <script type=”text/javascript”>
         window.onload=function(){
           var btn=  document.getElementById(“btn”);
           var ul=  document.getElementById(“u”);
            //点击事件
             btn.onclick=function(){
                var li= document.createElement(“li”);//创建li标签
                var input= document.createElement(“input”); //创建input标签
                 input.setAttribute(“type”,”text”);
                 input.setAttribute(“placeholder”,”请输入内容”);
                 li.appendChild(input);
                 ul.appendChild(li);
             }
         }
    </script>
2、Table对象
 <script type=”text/javascript”>

         window.onload=function(){

           var table=  document.getElementById(“myTable”);

           var btn1=  document.getElementById(“btn1”);

           var btn2=  document.getElementById(“btn2”);

             //显示表格总行数

             btn1.onclick= function () {

                 alert(table.rows.length);

             }

             //显示第2行第2列的单元格内容rows是一个数组 cells也是一个数组

             btn2.onclick= function () {

                 alert(table.rows[1].cells[1].innerHTML);

             }

         }

    </script>

</head>

<body>

 <input  type=”button” value=”显示表格总行数” id=”btn1″>

 <input  type=”button” value=”显示第2行第2列的单元格内容” id=”btn2″>

<table id=”myTable” border=”1″>

    <tr>

        <td>第一行第一列</td>

        <td>第一行第二列</td>

        <td>第一行第三列</td>

    </tr>

    <tr>

        <td>第二行第一列</td>

        <td>第二行第二列</td>

        <td>第二行第三列</td>

    </tr>

    <tr>

        <td>第三行第一列</td>

        <td>第三行第二列</td>

        <td>第三行第三列</td>

    </tr>
</table>

</body>
3、Table新增和删除
    <script type=”text/javascript”>

         window.onload=function(){

           var table=  document.getElementById(“myTable”);

           var btn1=  document.getElementById(“btn1”);

           var btn2=  document.getElementById(“btn2”);

             //新增insertRow(index)

             btn1.onclick= function () {

              var row=  table.insertRow(0);

                 //给行新增列   并且给列赋值

                 row.insertCell(0).innerHTML=”新增行的列1″;

                 row.insertCell(1).innerHTML=”新增行的列2″;

                 row.insertCell(2).innerHTML=”新增行的列3″;

             }

             //删除最后一行deleteRow(index)

             btn2.onclick= function () {

              table.deleteRow(table.rows.length-1);

             }

         }

    </script>
4、String对象的使用
   <script type=”text/javascript”>
         window.onload=function() {
            var   url=”http://www.bdqn.cn?name=admin”;
             //想要获取?之后的数据 并且把  admin 变成大写
            var index= url.indexOf(“?”);
             //alert(url.substring(index+1)); ？之后的数据
              index= url.indexOf(“=”);
             alert(url.substring(index+1).toUpperCase());
         }
    </script>
5、Date的使用
    <script type=”text/javascript”>
         window.onload=function() {
            function getTime(){  //获取当前系统时间
                var  date=new Date();
                var  hours=date.getHours();
                var  mins=date.getMinutes();
                var  secs=date.getSeconds();
                document.getElementById(“time”).innerHTML=hours+”:”+mins+”:”+secs;
            }
             //定时函数
            setInterval(getTime,1000);
         }
    </script>
6、数组的使用
 <script type=”text/javascript”>
        //数组的声明
          var  arr=[“aa”,”bb”,”cc”];  //3
          var  arr1=new Array();   //0
          var  arr2=new Array(20);  //20
          var  arr3=new Array(“aa”,”bb”,”cc”); //3
     //遍历数组中的元素
        for(var i=0;i<arr3.length;i++){
            document.write(arr3[i]+”<br/>”)
        }
        for(var x in arr3){
            document.write(x+”====>”+arr3[x]+”<br/>”)
        }
 </script>
7、数组的属性和方法
  <script type=”text/javascript”>
        //数组的声明
          var  arr=[“aa”,”cc”,”bb”];
        //数组的长度
        document.write(“数组的长度是：”+arr.length+”<br/>”);
       //向数组中添加一个新元素  push()新增之后会返回一个数组新的长度
        document.write(arr.push(“dd”)+”<br/>”) ;
        document.write(arr[3]+”<br/>”);
 
        //把数组使用字符 “-” 连接起来   join()
        document.write(arr.join(“-“)+”<br/>”);
        document.write(arr.sort()+”<br/>”); //字符abcd…..
 
        //创建一个新的数组
        var  arr2=[10,20,2,3,150,1,90];
        //如果说是数字排序 我们需要加入一个比较函数
        document.write(arr2.sort(function(a,b){
            return a-b;  // 如果想  降序 b-a
        }));
    </script>
8、打印等腰三角形
  <script type=”text/javascript”>

    window.onload=function(){

         var arr=[];  //声明一个空的数组

         var  str=””;

        for(var i=0;i<8;i++){

            str=”*”;

            for(var j=0;j<i;j++){

                str+=”&nbsp;&nbsp;*”

            }

            arr.push(str);

        }

     document.getElementById(“text”).innerHTML=(arr.join(“<br/>”));

    }
    </script>
9、style样式
    <script type=”text/javascript”>
    window.onload=function(){
         var  dom= document.getElementById(“text”);
      /*
      alert(1);
        //改变
        dom.style.backgroundColor=”pink”;
        dom.style.marginLeft=”200px”;
        dom.style.display=”none”;*/
        dom.className=”title”;
    }
    </script>
10、Tab选项卡
 <style type=”text/css”>

        #tab{ width: 400px;}

        #tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;}

        #tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;}

        #tab ul li.cur{background-color: red}

        #tab .content{width:100%;border:1px solid #eeeeee;height: 100px;}

    </style>

    <script type=”text/javascript”>

        window.onload = function() {

            //获取li

           var  lis=document.getElementsByTagName(“li”);

            for(var  i=0;i<lis.length;i++){  //循环的是tab框

                lis[i].index=i;

                lis[i].onmousemove=function(){

                    for(var  j=0;j<lis.length;j++){ //循环的是div的内容

                        document.getElementById(“content-“+j).style.display=”none”;

                        lis[j].className=””;

                    }

                    lis[this.index].className=”cur”;

                    document.getElementById(“content-“+this.index).style.display=”block”;

                }

            }

        }

    </script>

</head>

<body>

<div id=”tab”>

    <ul>

        <li class=”cur”>tab1</li>

        <li>tab2</li>

        <li>tab3</li>

        <li>tab4</li>

    </ul>

    <div id=”c-box”>

        <div class=”content” id=”content-0″>

            tab-1第一个容器的内容

        </div>

        <div class=”content” id=”content-1″ style=”display: none;”>

            tab-2第二个容器的内容

        </div>

        <div class=”content” id=”content-2″ style=”display: none;”>

            tab-3第3个容器的内容

        </div>

        <div class=”content” id=”content-3″ style=”display: none;”>

            tab-4第4个容器的内容

        </div>

    </div>

</body>
—–使用jquery实现—
 <title>Tab切换</title>

    <!–先引入样式文件–>

  <link rel=”stylesheet” href=”themes/base/jquery.ui.all.css”>

  <!–引入jquery需要的脚本库–>

    <script type=”text/javascript” src=”js/jquery-1.8.3.js”></script>

    <script type=”text/javascript” src=”js/jquery-ui.js”></script>

    <script type=”text/javascript” src=”js/jquery.ui.tabs.js”></script>
    <script type=”text/javascript”>

        $(function(){

            $(“#myTabs”).tabs({

                active:1, //默认选中的tab

                event:”mouseover” //触发的事件

            })

        })

    </script>

11、滚动距离
<style type=”text/css”>

        * { margin:0; padding: 0; }

        #box1 { height:200px;width: 200px;background:#eee;border:1px solid #000;overflow-y:scroll; }

        p { line-height:40px; }

    </style>

    <script type=”text/javascript”>

        window.onload = function () {

            var text=document.getElementById(“text”);

            var box1=document.getElementById(“box1”);

            box1.onscroll=function(){

                text.innerHTML=”距离Top多少像素：”+box1.
scrollTop;

            }

        }

    </script>

12、漂浮图片
   <style type=”text/css”>

        *{margin:0;padding: 0;}

       #box{

            position: absolute;

           top: 0px;

           left: 0px;

       }

    </style>

    <script type=”text/javascript”>

        window.onload = function () {

            var box=document.getElementById(“box”);

            var time=null,x= 1,y= 1,speed=5;
            function go(){

              //水平方向

                if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){

                    x=-1;

                }

                if(box.offsetLeft<0){

                    x=1;

                }

                box.style.left=box.offsetLeft+x*speed+”px”;

              //垂直方向

                if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){

                    y=-1;

                }

                if(box.offsetTop<0){

                    y=1;

                }

                box.style.top=box.offsetTop+x*speed+”px”;

            }

            //定时函数

            time=setInterval(go,100);

            //鼠标移上去 停止

     box.onmousemove=function(){

         if(time!=null){

             clearInterval(time);

         }

     }

            //鼠标离开  继续移动

     box.onmouseout=function(){

         time=setInterval(go,100);

     }

        }

    </script>

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/12177.html

赞 (0)
0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论