zoukankan      html  css  js  c++  java

  • 一个初学者的辛酸路程-前端js

    内容回顾：

    1、CSS的基本概念：

    层叠样式表。

    2、CSS的三种书写方式

    ① 行内样式

    <div style="color: red;">sdfdsf</div>

    ② 内部样式

    head标签之内：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>sdfsdsd</div>
</body>

    这里又有CSS几种常见的选择器：

    标签选择器：

    <style>
        div{
            color: red;
        }
</style>

    ID选择器:

    <style>
        #id{
            font-size:12px;
        }
    </style>

    类别选择器：

    .class{
      color: red;      
}

    包含选择器：

    <div>
        <span></span>
</div>

div  span{
    color: red;
}

    分组选择器：

    div,span{
    color: red;
}

    通用选择器：

    *{
    color: red;
}

    伪类选择器：

    鼠标放上去颜色发生改变

    a: hover{
    color:red;
}


a:active{
    color: red;
}

a:visited{
    color: red;
}

a:link{
    color:red;
}

    ③ 外部样式

    <link href="a.css" />

    3、CSS文字段落基本属性

         设置div的高度：  height

    　　设置宽度：  width

    　　让123居中  <div>123</div>

    　　　　line-height:  设置行高与height一致

    　　text-align：  left   right  center 让文字往左右居中

    　　为div设置一个框：    border：1px solid  red;

    　　

    4、CSS的背景

    　　background:     

    　　　　　　　1、　background-color: red;

    　　　　　　　　　　background-img: url("1.jpg");

    　　　　　　　　　　在X轴上进行重复： background-repeat-x:

    　　　　　　　　　　在Y轴上进行重复： background-repeat-y:

    　　　　　　　2、　background-position-x:

    　　　　　　　3、　background-position-y:

    　　

    5、CSS的布局

    　　让div往左或者往右浮动

    　　float: left;  right

    　　配合清除浮动：    <div style="clear:both"></div>

    6、CSS的盒子模型

    　　主要是2个属性，1个叫做margin,1个叫做padding

        margin:  设置外边距  （1个值，上下左右都是10PX，2个值，上下，左右，3个值，第一个是上，第二个是左右，第三个下，提供四个，上-右-下-左）  margin是对外元素的距离，用来控制元素本身的浮动位置。

    　 padding:  设置内边距（相同），是对内元素，用来控制元素内部元素的位置

    7、position:

    　　1、fixed

    　　　　固定，类似狗皮膏药的感觉，离上下左右的高度：

    　　　　　　　　top  right   left  bottom 都为0就是展开整个页面

    　　2、relative

    　　　　　　　　

    　　3、absolute

     　　　　定位方式：如果父级有定位方式，则以父级定位，如果没有则以body定位

     8、z-index:

     z-index： 如果有浮层，想让哪个div往上浮动，就设置大点就完事。

    9、IE6的bug

    　　出现的一些bug

    10、透明度

    　　opcatiy： 值越大就越深，越小就透明。

    主要内容

    1、页面布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .pg-menu{
            10%;
            background-color: #333744;
            /*height:1000px;*/
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .pg-body .pg-content{
             90%;
            background-color: gainsboro;
            position: absolute;
            top: 48px;
            right:0;
            bottom:0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">

    </div>
    <div class="pg-body">
        <div class="pg-menu">

        </div>
        <div class="pg-content">

        </div>
    </div>
</body>
</html>

    2、后台布局+下拉菜单

    后台管理布局的下拉菜单需要注意：

    对a标签进行hover，然后让a下面的c1进行一个反应。

    我要实现下面一个功能，就是我鼠标放在上面就会弹出下面的框

    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .pg-menu{
            10%;
            background-color: #333744;
            /*height:1000px;*/
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .pg-body .pg-content{
             90%;
            background-color: gainsboro;
            position: absolute;
            top: 48px;
            right:0;
            bottom:0;
            overflow: auto;
            z-index: 9;
        }
        .pg-header .logo{
            color: white;
            text-align: center;
             10%;
            line-height:48px;
            background-color: #7abd54;
        }
        .pg-header .userinfo img{
            border-radius: 50%;
        }
        .pg-header .userinfo{
            border: 1px solid red;
            margin-top: 4px;
            140px;
        }
        .pg-header .userinfo .infolist{
            display: none;
            position: absolute;
            top:43px;
            right: 36px;
            background-color: lavender;
            z-index: 10;
        }
        .pg-header .userinfo:hover .infolist{
            display: block;
            color: red;
        }

        .pg-header .userinfo .infolist a{
            display: block;
            color: white;
            140px;
        }

    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">
            <span>欢迎光临</span>
        </div>
        <div class="userinfo right" style="position: relative;">
            <img src="11.png" alt="" width="40" height="40">
            <div class="infolist">
                <a>我的信息</a>
                <a>登录</a>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="pg-menu">

        </div>
        <div class="pg-content">

        </div>
    </div>
</body>
</html>
    View Code

     3、JS 之DOM操作

    写一个表格

    快速写表格的方法

    <body>
        table>(thead>tr>th{&nbsp;}*3)+(tbody>tr*3>td{&nbsp;}*3)
    </body>

    然后按TAB键即可。
    效果如下：

     

    点击按钮，触发函数，需要用到

    <input type="button" value="全选" onclick="selectAll();">

     然后呢，在查看点击按钮是否能运行函数

    <script>
        function selectAll(){
            console.log('dsdfdsf');
        }
    </script>

     然后点击按钮查看日志

     最后实现下面的效果：

     

    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick = "selectAll();"/>
<input type="button" value="取消" onclick = "cancelAll();"/>
<input type="button" value="反选" onclick = "reverseAll();"/>

<table border="1">
    <thead>
    <tr>
        <th>操作</th>
        <th>IP</th>
        <th>端口</th>
    </tr>
    </thead>
    <tbody id="info">
    <tr>
        <td><input type="checkbox"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </tbody>
</table>
</body>
    <script>
        function selectAll(){
//            console.log('dsdfdsf');
            var myTbody = document.getElementById("info");
//            1、得到Tbody
            console.log(myTrs);
            // 2、找下面的孩子
            var myTrs = myTbody.children;
//                console.log(myTrs);
            for(var i=0; i<myTrs.length;i++){
//                console.log(myTrs[i].children[0].children[0]);
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = true;
            }
        }

        function cancelAll(){
//            console.log('dsdfdsf');
            var myTbody = document.getElementById("info");
//            1、得到Tbody
            console.log(myTrs);
            // 2、找下面的孩子
            var myTrs = myTbody.children;
//                console.log(myTrs);
            for(var i=0; i<myTrs.length;i++){
//                console.log(myTrs[i].children[0].children[0]);
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = false;
            }
        }

        function reverseAll(){
//            console.log('dsdfdsf');
            var myTbody = document.getElementById("info");
//            1、得到Tbody
            console.log(myTrs);
            // 2、找下面的孩子
            var myTrs = myTbody.children;
//                console.log(myTrs);
            for(var i=0; i<myTrs.length;i++){
//                console.log(myTrs[i].children[0].children[0]);
                var myInput = myTrs[i].children[0].children[0];
                if(myInput.checked){
                    myInput.checked = false;
                }else{
                    myInput.checked = true;
                }
            }
        }
    </script>
</html>
    View Code

     4、模态框

    实现效果如下：

    点击按钮以后弹出模块框，记住这里是有3层叠加

    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            position: fixed;
            top: 0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity:0.6;
        }
        .info{
            position: fixed;
            400px;
            height:300px;
            top: 50px;
            left:400px;
            right:400px;
            background-color: white ;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="点击" onclick="showModel();" />
    </div>
    <!--遮罩层-->
    <div class="one hide"></div>

    <!--弹出框-->
    <div class="info hide">
        <p>
            <input type="text"><p></p>
            <input type="text"><p></p>
            <input type="button" value="取消" onclick="hideModel();">
            <input type="button" value="确定">
        </p>
    </div>
</body>
<script>
    function showModel(){
//        拿到弹框
        var myone = document.getElementsByClassName("one")[0];
        var info = document.getElementsByClassName("info")[0];
//        console.log(myone);
        myone.classList.remove('hide');
        info.classList.remove('hide');
    }

    function hideModel(){
//        拿到弹框
        var myone = document.getElementsByClassName("one")[0];
        var info = document.getElementsByClassName("info")[0];
//        console.log(myone);
        myone.classList.add('hide');
        info.classList.add('hide');
    }
</script>
</html>
    View Code

    5、跑马灯

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wel">
        不要拦我，这次我要拿次A
    </div>
</body>
<script>
    function test(){
        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;

        mywel.innerText = new_content;
    }

    setInterval("test()",1000);
</script>

</html>
    View Code

    附上一个最简单的跑马灯

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<marquee behavior="" direction="">谁都不要拦我，这次我要拿次A</marquee>
</body>
</html>

    6、时间模块

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="clock"></div>
</body>
    <script>
        function clock(){
            var mydate = new Date();
            var myyear = mydate.getFullYear();
            var mymonth = mydate.getMonth();
            var myday = mydate.getDay();
            var myhour = mydate.getHours();
            var myminuts = mydate.getMinutes();
            var mysec = mydate.getSeconds();

            var res = myyear + "-" + mymonth+"-"+myday+" "+ myhour +":"+myminuts+":"+mysec
            var mycolck = document.getElementById("clock");
            mycolck.innerText = res;
        }
        setInterval("clock();",1000);
    </script>
</html>
    View Code
  • 相关阅读:
    Day20:Decorator and Metaclass
    Day19:hasattribute;getattribute;seattributet;delattribute
    Day18:polymorphic and reflection
    Day17:call the base class
    ACL权限
    内置函数
    用户配置文件-影子文件
    用户配置文件-用户信息文件
    脚本安装包
    定义函数
  • 原文地址：https://www.cnblogs.com/jixuege-1/p/6419315.html
Copyright © 2011-2022 走看看