一些常用的html、css、js的简单应用

约定不等于承诺〃 2022-12-20 01:24 182阅读 0赞

## json转化(常用) ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../js/vue.js"></script>
        <title>条件</title>
    </head>
    <style type="text/css">
    
    </style>
    <body>
    <div id="example">
        <p>复选框元素</p>
        <span>你的爱好:</span>
        <input type="checkbox" v-model="message3" value="篮球"><label>篮球</label>
        <input type="checkbox" v-model="message3" value="滑板"><label>滑板</label>
        <input type="checkbox" v-model="message3" value="音乐"><label>音乐</label>
        <input type="checkbox" v-model="message3" value="跳舞"><label>跳舞</label>
        <input type="checkbox" v-model="message3" value="其他"><label>其他</label>
        <span>你选择的是:{
       {message3}}</span>
        <br/>
        <button v-on:click="btn_submit">提交</button>
    </div>
    <script>
        new Vue({
            el:"#example",
            data:{
                message3:[],
            },
            methods:{
                btn_submit:function () {
                    console.log(this.message3);
                    let jsonHobby = this.message3;
                   let a=JSON.stringify(jsonHobby);//数组转化成json
                    console.info("转化成json:"+a);
                    console.info("解析json:"+JSON.parse(a));//解析json
                }
            }
        })
    </script>
    </body>
    </html>

![在这里插入图片描述][20210211110327487.png]  
![在这里插入图片描述][20210211110332291.png]  
结论：  
JSON.parse(“json内容”); //前端解析json，如果json为空，会报错  
JSON.stringify(“数组”); //数组转成json格式

## 可编辑表格 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>可编辑表格</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../js/script1.js"></script>
    
    </head>
    <style>
        div.warp {
            width: 834px;
            margin-left:50px;
            margin-top: 50px;
            border: 1px solid #ccc;
        }
    
        div.title {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            background-color: #157FCC;
            font-size: 20px;
            color: #fff;
        }
    
        div.tools {
            height: 30px;
            padding: 10px;
            background-color: #DFEAF2;
        }
    
        div.addBtn {
            width: 95px;
            height: 20px;
            padding: 5px;
            border: 1px solid #ccc;
            color: #fff;
            background-color: #307FB9;
            vertical-align: middle;
            cursor: pointer;
        }
    
        div.icon {
            display: inline-block;
            vertical-align: middle;
        }
    
        table {
            border-collapse:collapse;
        }
    
        tr.evenline {
            background-color: #fafafa;
        }
    
        td {
            width: 100px;
            height: 28px;
            line-height: 28px;
            padding-left: 10px;
        }
    
        td.widther {
            width: 150px;
        }
    
        thead td {
            border: 1px solid #ccc;
            background-color: #f5f5f5;
        }
    
        /* CSS 实现按钮图标 */
        span.icon{height:20px; width:20px; display:block; position:relative;}
    
        .add{border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px; background:#78AF6B;}
    
        .add:before, .add:after{
            content:''; height:4px; width:12px; display:block; background:#fff;
            border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;
            position:absolute; top:8px; left:4px;
        }
    
        .add:after{height:12px; width:4px; top:4px; left:8px;}
    
        .del{
            border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;
            background:#FF3333; cursor: pointer;
        }
    
        .del:before {
            content:''; height:4px; width:12px; display:block; background:#fff;
            position:absolute; top:8px; left:4px; border-radius:10px;
            -webkit-border-radius:10px;-moz-border-radius:10px;
        }
    
    </style>
    <body>
    
    <div class="warp">
        <div class="title"><span>可编辑表格</span></div>
        <div class="tools">
            <div class="addBtn">
                <div class="icon">
                    <span class="add icon"></span>
                </div>
                <div class="icon">
                    新增数据
                </div>
            </div>
        </div>
        <table id="tab">
            <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>入学年份</td>
                <td>入学日期</td>
                <td class="widther">所学专业</td>
                <td>删除</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td class="edi-text">张萍萍</td>
                <td class="edi-gender">女</td>
                <td class="edi-year">2000</td>
                <td class="edi-text">2000-09-01</td>
                <td class="edi-text">材料科学与工程系</td>
                <td>
                    <span class="del icon"></span>
                </td>
            </tr>
            <tr class="evenline">
                <td>2</td>
                <td class="edi-text">陈飞</td>
                <td class="edi-gender">男</td>
                <td class="edi-year">2000</td>
                <td class="edi-text">2000-09-01</td>
                <td class="edi-text">化学系</td>
                <td>
                    <span class="del icon"></span>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td class="edi-text">董婷婷</td>
                <td class="edi-gender">女</td>
                <td class="edi-year">2000</td>
                <td class="edi-text">2000-09-01</td>
                <td class="edi-text">化学系</td>
                <td>
                    <span class="del icon"  ></span>
                </td>
            </tr>
            <tr class="evenline">
                <td>4</td>
                <td class="edi-text">康莹莹</td>
                <td class="edi-gender">女</td>
                <td class="edi-year">2000</td>
                <td class="edi-text">2000-09-01</td>
                <td class="edi-text">外国语系</td>
                <td>
                    <span class="del icon"></span>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td class="edi-text">唐可儿</td>
                <td class="edi-gender">女</td>
                <td class="edi-year">2000</td>
                <td class="edi-text">2000-09-01</td>
                <td class="edi-text">外国语系</td>
                <td>
                    <span class="del icon"></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    </html>

$(document).ready(function(){
        bindAddBtn();
        bindDelBtn();
        bindCellEdit();
    });
    
    // 绑定添加数据按钮事件
    function bindAddBtn() {
        $('div.addBtn').click(function() {
            var count =  6 // code
            var elements = '<tr><td>' + count + '</td><td class="edi-text">安好</td>'
                + '<td class="edi-gender">女</td><td class="edi-year">2016</td>'
                + '<td class="edi-text">2015-09-01</td>'
                + '<td class="edi-text">材料科学与工程系</td>'
                + '<td><span class="del icon"></span></td></tr>';
    
            // code
            $("tbody").append(elements);
    });
    }
    
    // 绑定删除按钮事件
    function bindDelBtn() {
        // var tb = $("#tab");
        // $(".del",tb).die('click').live('click',function(){
        //     $(this).parent().parent().remove();
        // });
    
        $('.del').click(function(){
            if(window.confirm("您确定要删除数据吗?"))
            {
                $(this).parent().parent().remove();
            }
        });
    }
    
    // 绑定单元格双击事件
    function bindCellEdit() {
    
        $("table").on("dblclick","td",function() {
            if ($(this).children("input").length > 0) {
                return false;
            }
            var tdDom = $(this);
            //保存初始值
            var tdPreText = $(this).text();
            //给td设置宽度和给input设置宽度并赋值
            $(this).width(100).html("<input type='text'>").find("input").width(100).val(tdPreText);
            //失去焦点的时候重新赋值
            var inputDom = $(this).find("input");
            inputDom.blur(function () {
                var newText = $(this).val();
                $(this).remove();
                tdDom.text(newText);
            })
        })
    
    
    }

## 进度条 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>进度条</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../js/script2.js"></script>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <style>
        div.progress {
            width: 700px;
            margin: 50px;
        }
    
        div.bar {
            width: 100%;
            height: 35px;
        }
    
        div.border, div.percent {
            float: left;
            height: 30px;
        }
    
        div.border {
            width: 90%;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    
        div.fill {
            width: 0%;
            height: 100%;
            background-color: #6CAF00;
        }
    
        div.percent {
            width: 8%;
            line-height: 30px;
            margin: 1px;
            text-align: center;
            font-size: 24px;
        }
    
        div.control {
            height: 20px;
            padding: 10px;
        }
    
        .clear {
            clear:both;
        }
    
    </style>
    <div class="progress">
        <div class="bar">
            <div class="border">
                <div class="fill"></div>
            </div>
            <div class="percent">
                <span class="num">0</span>%
            </div>
            <div class="clear"></div>
        </div>
        <div class="control">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
        </div>
    </div>
    </body>
    </html>

let intervalHandler;
    
    $(document).ready(function(){
        $('.start').click(function() {
            $('.start').text('重新开始');
            $('.pause').text('暂停');
            $('span.num').text(0);
            doProgress();
        });
    
        $('.pause').click(function() {
            if ($('.pause').text() == '暂停') {
                $('.pause').text('继续');
                clearInterval(intervalHandler);
            } else {
                $('.pause').text('暂停');
                doProgress();
            }
        });
    });
    
    function doProgress() {
        clearInterval(intervalHandler);
        intervalHandler = setInterval(function() {
            var percent = parseInt($('span.num').text());
    
            if (percent != 100) {
                percent++;
                $('div.fill').width(percent + '%');
                $('span.num').text(percent);
            }
        }, 100);
    }

## 动态简历（城市联动效果） ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../js/jquery-1.8.3.js"></script>
        <script src="../js/script.js"></script>
        <title>三级联动</title>
    </head>
    <body>
    <style>
        div.page {
            width: 800px;
            height: 842px;
            margin: 50px auto;
            font-family:SimHei;
        }
    
        div.top, div.footer {
            background-color: #2BA4DD;
        }
    
        div.top {
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
    
        div.footer {
            height: 15px;
            margin-top: 30px;
        }
    
        li {
            list-style-type: none;
        }
    
        li.topContact {
            display: inline-block;
            padding: 0px 70px;
        }
    
        div.header {
            height: 130px;
            padding: 30px 0px;
            text-align: center;
        }
    
        div.name {
            height: 100px;
            line-height: 100px;
            font-size: 50px;
        }
    
        div.job {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }
    
        div.content {
    
        }
    
        /* Panel 是简历信息具体的内容面板，即可伸缩面板 */
        .panel {
            margin-top: 20px;
            padding: 0px 0px 20px 0px;
        }
    
        .panelTitle {
            height: 35px;
            width: 100%;
            border-bottom: 2px solid #2BA4DD;
        }
    
        div.colorBlock, div.title {
            float: left;
        }
    
        div.scrollBtn {
            float: right;
        }
    
        /* 伸缩面板的伸缩按钮 */
        span.scroIcon {
            height:20px; width:40px; display:block; position:relative;
            cursor: pointer;
        }
    
        .scroIcon:before{
            content:''; height:0; width:0; display:block; border:15px transparent double;
            border-bottom-width:0; border-top-color:#2BA4DD; position:absolute;
            top:0px; left:0px; }
    
        .colorBlock {
            height: 100%;
            width: 25px;
            margin-right: 15px;
            background-color: #2BA4DD;
        }
    
        .title {
            width: 400px;
            height: 100%;
            line-height: 35px;
            font-size: 24px;
        }
    
        /* 简历项 */
        li.resumeItem {
            padding: 5px 0px;
        }
    
        li.resumeItem span, input {
            display: inline-block;
        }
    
        li.resumeItem span {
            width: 150px;
        }
    
        li.resumeItem select {
            width: 100px;
        }
    
        .clear {
            clear:both;
        }
    </style>
    
    <div class="page">
        <div class="top">
            <ul>
                <li class="topContact">CELL: 158 5151 1985</li>
                <li class="topContact">EMAIL: mail@domain.com</li>
            </ul>
        </div>
        <div class="header">
            <div class="name">
                <span>大 漠 孤 烟</span>
            </div>
            <div class="job">
                <span>Front End Web Developer</span>
            </div>
        </div>
        <div class="content">
            <div class="panel">
                <div class="panelTitle">
                    <div class="colorBlock"></div>
                    <div class="title">
                        <span>个人信息</span>
                    </div>
                    <div class="scrollBtn">
                        <span class="scroIcon"></span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="panelContent">
                    <ul>
                        <li class="resumeItem"><span>姓名</span><input type="text" /></li>
                        <li class="resumeItem">
                            <span>性别</span>
                            <select>
                                <option value="">--请选择--</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </li>
                        <li class="resumeItem">
                            <span>出生年月</span><select class="brithYear">
                            <option value="">--请选择--</option>
                        </select> 年 
                            <select class="brithMonth">
                                <option value="">--请选择--</option>
                            </select> 月 
                        </li>
                        <li class="resumeItem">
                            <span>户籍所在地</span><select class="province">
                            <option value="">--请选择--</option>
                        </select>
                            <select class="city">
                                <option value="">--请选择--</option>
                            </select>
                        </li>
                    </ul>
                </div>
            </div>
    
            <div class="panel">
                <div class="panelTitle">
                    <div class="colorBlock"></div>
                    <div class="title">
                        <span>联系方式</span>
                    </div>
                    <div class="scrollBtn">
                        <span class="scroIcon"></span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="panelContent">
                    <ul>
                        <li class="resumeItem"><span>手机号码</span><input type="text" /></li>
                        <li class="resumeItem"><span>电子邮箱</span><input type="text" /></li>
                        <li class="resumeItem"><span>现居地址</span><input type="text" /></li>
                    </ul>
                </div>
            </div>
    
            <div class="panel">
                <div class="panelTitle">
                    <div class="colorBlock"></div>
                    <div class="title">
                        <span>求职意向</span>
                    </div>
                    <div class="scrollBtn">
                        <span class="scroIcon"></span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="panelContent">
                    <ul>
                        <li class="resumeItem">
                            <span>求职状态</span><select>
                            <option value="">--请选择--</option>
                            <option value="1">工作中</option>
                            <option value="2">正在找工作</option>
                        </select>
                        </li>
                        <li class="resumeItem">
                            <span>目标薪资</span><select>
                            <option value="">--请选择--</option>
                            <option value="1">月薪</option>
                        </select>
                            <select>
                                <option value="">--请选择--</option>
                                <option value="1">3K~4K</option>
                                <option value="2">5K~6K</option>
                                <option value="2">5K~6K</option>
                                <option value="2">7K~8K</option>
                                <option value="2">9K~10K</option>
                                <option value="2">11K~15K</option>
                                <option value="2">16K~20K</option>
                                <option value="2">20K以上</option>
                            </select>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
    
        </div>
    </div>
    
    </body>
    </html>

$(document).ready(function(){
    //code
        prov = JSON.parse(citys);
        console.log(prov);
        initForm();
        initProvince();
        bindIconClick();
        bindProvinceChange();
    });
    // 初始化日期下拉框数据
    function initForm() {
        let item = null,year = 1970;
        for(let i=26; i>=0; i--){
            item = $('<option value="'+(year+i)+'">'+(year+i)+'</option>');
            $('.brithYear').append(item);
        }
        for(let i=1; i<=12; i++){
            item = $('<option value="'+i+'">'+i+'</option>');
            $('.brithMonth').append(item);
        }
    }
    // 绑定省数据
    function initProvince() {
        let i,item;
        for(i=0;i<prov.length;i++){
            item = $('<option value="'+prov[i].name+'">'+prov[i].name+'</option>');
            $('.province').append(item);
        }
    }
    // 绑定省份选择框事件
    function bindProvinceChange() {
        $('.province').change(function(){
            $($('.city').children().get(0)).siblings().remove();
            let i,item,cities;
            for(i=0;i<prov.length;i++){
                if(prov[i].name==$('.province').val()){
                    cities = prov[i].cities;
                    console.log(cities);
                    break;
                }
            }
            for(i=0;i<cities.length;i++){
                item = $('<option value="'+cities[i]+'">'+cities[i]+'</option>');
                $('.city').append(item);
            }
        });
    }
    // 绑定伸缩面板事件
    function bindIconClick() {
        $('span.scroIcon').click(function(event){
            var eventIcon=$(event.target);
            var contentPanel=eventIcon.parents('.panelTitle').next();
            if(contentPanel.is(':hidden')){
                contentPanel.show();
            }else{
                contentPanel.hide();
            }
        });
    }
    var citys = '[{ "name": "北京", "cities": ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"] },'
        + '{ "name": "天津", "cities": ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"] },'
        + '{ "name": "河北", "cities": ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"] },'
        + '{ "name": "山西", "cities": ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"] },'
        + '{ "name": "内蒙古", "cities": ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"] },'
        + '{ "name": "辽宁", "cities": ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] },'
        + '{ "name": "吉林", "cities": ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"] },'
        + '{ "name": "黑龙江", "cities": ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"] },'
        + '{ "name": "上海", "cities": ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"] },'
        + '{ "name": "江苏", "cities": ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"] },'
        + '{ "name": "浙江", "cities": ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"] },'
        + '{ "name": "安徽", "cities": ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"] },'
        + '{ "name": "福建", "cities": ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"] },'
        + '{ "name": "江西", "cities": ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"] },'
        + '{ "name": "山东", "cities": ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"] },'
        + '{ "name": "河南", "cities": ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"] },'
        + '{ "name": "湖北", "cities": ["武汉", "襄樊", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "江汉", "随枣", "荆沙", "咸宁"] },'
        + '{ "name": "湖南", "cities": ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"] },'
        + '{ "name": "广东", "cities": ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"] },'
        + '{ "name": "广西", "cities": ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"] },'
        + '{ "name": "海南", "cities": ["海口", "三亚"] },'
        + '{ "name": "重庆", "cities": ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"] },'
        + '{ "name": "四川", "cities": ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"] },'
        + '{ "name": "贵州", "cities": ["贵阳", "遵义", "安顺", "黔西南", "都匀"] },'
        + '{ "name": "云南", "cities": ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"] },'
        + '{ "name": "西藏", "cities": ["拉萨", "林芝", "日喀则", "昌都"] },'
        + '{ "name": "陕西", "cities": ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"] },'
        + '{ "name": "甘肃", "cities": ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"] },'
        + '{ "name": "青海", "cities": ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"] },'
        + '{ "name": "宁夏", "cities": ["银川", "吴忠"] },'
        + '{ "name": "新疆", "cities": ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"] },'
        + '{ "name": "香港", "cities": ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"] },'
        + '{ "name": "澳门", "cities": ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区", "路氹城"]}]';
    
    let prov;

## 获取网页区域的大小 ##

console.log("网页可见区域宽:"+document.body.clientWidth);
            console.log("网页可见区域高:"+document.body.clientHeight);
            console.log("网页可见区域宽(包括变线和滚动条的宽):"+document.body.offsetWidth);
            console.log("网页可见区域高(包括变线的宽)"+document.body.offsetHeight);
            console.log("网页正文全文宽:"+document.body.scrollWidth);
            console.log("网页正文全文高:"+document.body.scrollHeight);
             console.log("网页正文部分上:"+window.screenTop);
             console.log("网页正文部分左:"+window.screenLeft);
             console.log("屏幕分辨率的宽"+window.screen.width);
             console.log("屏幕分辨率的高:"+window.screen.height);
            console.log("屏幕可用工作区高度:"+window.screen.availHeight);
            console.log("屏幕可用工作区宽度:"+window.screen.availWidth);
            console.log("屏幕设置是:"+window.screen.colorDepth+"位彩色");

实现盒子拖拽功能

div{
        height: 100px;
        width:100px;
        background-color: #FF0000;
        border-radius: 5px;
        margin-bottom: 5px;
    
        position: absolute;
        top: 100px;
        left: 120px;
    }

<div id="example"></div>
    
    <script>
    
        $(function () {
            $("#example").mousedown(function (e) {
                var positionDiv = $(this).offset();
                console.log(positionDiv);//直接获取左上角距离顶部和左边的对象
                console.log(e.pageX);//获取鼠标按下去 距离左边的x位置

![在这里插入图片描述][20210203141009283.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../js/jquery-1.8.3.js"></script>
        <link rel="stylesheet" href="../css/common.css">
        <title>Title</title>
    </head>
    <body>
    <div id="example"></div>
    <script>
        $(function () {
            $("#example").mousedown(function (e) {
                var positionDiv = $(this).offset();
                var distenceX = e.pageX - positionDiv.left;
                var distenceY = e.pageY - positionDiv.top;
                $(document).mousemove(function(e) {
                    console.log(e.pageX);
                    var x = e.pageX - distenceX;
                    var y = e.pageY - distenceY;
                    if (x < 0) {
                        x = 0;
                    } else if (x > $(document).width() - $('div').outerWidth(true)) {
                        x = $(document).width() - $('div').outerWidth(true);
                    }
                    if (y < 0) {
                        y = 0;
                    } else if (y > $(document).height() - $('div').outerHeight(true)) {
                        y = $(document).height() - $('div').outerHeight(true);
                    }
                    $('div').css({
                        'left': x + 'px',
                        'top': y + 'px'
                    });
                });
                $(document).mouseup(function() {
                    $(document).off('mousemove');
                });
            })
        })
    </script>
    </body>
    </html>

## 页面头部固定，下面随着内容的增多滚动，但是头部不动的效果 ##

**`positive:fixed`**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>头部一直置顶</title>
        <style>
            .header{
                position: fixed;
                background-color: pink;
                width: 100%;
                line-height: 60px;
            }
        </style>
    </head>
    <body>
    <div class="header">
        页面头部固定，下面随着内容的增多滚动，但是头部不动的效果
    </div>
    <div id="container">
        <ul>
            <li><a href="#">测试内容</a></li>
            ......
        </ul>
    </div>
    </body>
    </html>

## 让ul li里面的内容横排 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        #menu{
            position: fixed;
            background-color: pink;
            line-height: 50px;
            width: 100%;
            text-align: center;
        }
            ul li{
                list-style: none;
                display: inline-block;
                margin-right: 30px;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>精品阅读</li>
            <li>管理书籍</li>
            <li>用户登录</li>
            <li>用户退出</li>
            <li>用户注册</li>
        </ul>
    </body>
    </html>

## 给按钮一个渐变颜色，以及右括号的制作(&gt)（左括号$lt依旧如此） ##

< less than, <
    > greater than,>

**`background-image: -webkit-linear-gradient(left,blue,pink);`**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>给按钮一个渐变的颜色</title>
        <style>
            #btn{
                border-radius: 30px;
                background-image: -webkit-linear-gradient(left,blue,pink);
                font-size: 6px;
                width: 120px;
                height: 60px;
            }
    
            #btn::after {
                content: "";
                position: absolute;
                width: 7px;
                height: 7px;
                border-top: 2px solid red;
                border-right: 2px solid red;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
    <button id="btn">用户注册</button>
    </body>
    </html>

## 图片在div中显示 ##

改变图片的比例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #left{
                width: 18%;
                border-right: 2px solid #fff;
                margin: 0 auto;
            }
            #left  img{
               width: 100%;
            }
        </style>
    </head>
    <body>
    <div id="footer" >
        <div id="left">
            <img src="../image/1.jpg" alt="">
        </div>
    </div>
    </body>
    </html>

## 盒子模型 ##

background-color: \#F6F6F6;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin: 0px;
            padding: 0px;
        }
            #left{
                width: 18%;
                border-right: 2px solid #fff;
                margin: 0 auto;
            }
    
            #left  img{
               width: 100%;
            }
            #footer{
                position: relative;
                background-color: #F6F6F6;
            }
    
            #right{
                position: absolute;
                top: 27px;
                right: 343px;
    
            }
            #right_top{
                width: 170px;
                height: 68px;
                border: 3px solid #fff;
                margin-left: -15px;
                margin-top: -22px;
                text-align: center;
                line-height: 68px;
            }
            #bottom_left, #bottom_right{
                border: 3px solid #fff;
                width: 84px;
                height: 70px;
            }
            #bottom_left{
                float:left;
                margin-left: -18px;
            }
            #right_bottom{
                border: 3px solid #fff;
                position: relative;
            }
            #bottom_right{
                position: absolute;
                left: 70px;
            }
        </style>
    </head>
    <body>
    <div id="footer" >
        <div id="left">
            <img src="../image/1.jpg" alt="">
    
            <div>
                <span>这是一幅多么美的图片啊</span>
            </div>
        </div>
    
        <div id="right">
            <div id="right_top">
                爱生活,爱学习
            </div>
            <div id="right_bottom">
                <div id="bottom_left">
                    生活不易，且行且珍惜
                </div>
                <div id="bottom_right">
                    有种生活叫做情调
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

## 用js来生成小圆点 ##

组装dom节点的一个思路：  
先创建好

我们动态通过js往ol子节点插入li标签；  
这个时候要创建li标签

let indexBox = document.querySelector(".index_box");
        
        let frg = document.createDocumentFragment();
       for(let i=0;i<3;i++){
           let li = document.createElement("li");
           li.setAttribute("data-index",i+1);
           frg.appendChild(li);
       }
       indexBox.children[0].style.width = 60+"px";//相当于ol标签加了宽度样式
       //<ol style="width:60px"></ol>
       indexBox.children[0].appendChild(frg);//然后把li标签插入到ol标签

有这些标签这个时候可以写样式了：

## 选项卡的实现 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tab选项卡</title>
    </head>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
    
        .warpper {
            border: 1px solid red;
            width: 408px;
            height: 320px;
            margin: auto;
        }
    
        .line {
            width: 408px;
            height: 55px;
            text-align: center;
        }
    
        .line>li {
            list-style: none;
            color: red;
            border: 1px solid red;
            float: left;
            width: 100px;
        }
    
        #div-v {
            background-color: antiquewhite;
        }
    
        #div1,
        #div2,
        #div3,
        #div4 {
            color: red;
            text-align: center;
            display: none;
        }
    
        #div1 {
            display: block;
        }
    </style>
    <script >
    
        function show(n,m) {
            //alert(n)
            // 将所有div i<4写n就会导致不能够把其他隐藏，因为n是自己传过去的内容隐藏 
            for (let i = 1; i <=4 ; i++) {
                let AllObj = document.getElementById("div"+i);
                AllObj.style.display="none";
            }
            let s = document.getElementById("div"+n);
            s.style.display="block";
    
        }
    </script>
    
    <body>
    <div class="warpper">
        <ul class="line">
            <li id="li1" onclick="show(1,this)">精品课程</li>
            <li id="li2" onclick="show(2,this)">vip课程</li>
            <li id="li3" onclick="show(3,this)">免费听课</li>
            <li id="li4" onclick="show(4,this)">用户登录</li>
        </ul>
        <div id="div-v">
            <div id="div1">
                精品课程
            </div>
            <div id="div2">
                vip课程
            </div>
            <div id="div3">
                免费听课
            </div>
            <div id="div4">
                用户登录
            </div>
        </div>
    </div>
    </body>
    </html>

## 原生js实现点哪个就高亮哪个 ##

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>选项卡</title>
        <style type="text/css">
          #login{
              background: pink;
              width: 100%;
              float: right;
          }
             ul li{
                list-style: none;
                display: inline-block;
    
            }
            a{
                text-decoration: none;
            }
          #login li.on {
              background:red;
          }
        </style>
    
    </head>
    <body>
    <div>
        <ul id="login">
            <li class="on"><a href="#">用户登录</a></li>
            <li><a href="#">用户注册</a></li>
        </ul>
    </div>
    <script type="text/javascript">
           let login =  document.getElementById("login");
    
           for(let i = 0;i<login.children.length;i++){
               //document.write(li[i].textContent);
               login.children[i].onclick=function (e) {
                   // alert(this)
                   for(i=0; i<login.children.length; i++) {
                       login.children[i].className='';
                   }
                   this.className='on';
               }
           }
    </script>
    </body>
    </html>

[20210211110327487.png]: /images/20221120/b123a8fad5d143409902421c3c6b6b9a.png
[20210211110332291.png]: /images/20221120/57588eda3cfb485797bde47d7084c4a7.png
[20210203141009283.png]: https://img-blog.csdnimg.cn/20210203141009283.png