zoukankan      html  css  js  c++  java
  • html、css、javascript随手笔记

    本文仅为个人常用代码整理,供自己日常查阅

    html

    浏览器内核

    <!--[if IE]><![endif]-->
    <!--[if IE 6]><![endif]-->
    <!--[if gte IE 7]><![endif]-->
    <!--[if lte IE 7]><![endif]-->
    <!--[if !IE]><![endif]-->
    <!--[if !(lte IE 7)]><!-->

    电话消息邮件

    <a href="tel:10086">电话:10086</a>
    <a href="sms:10086">短信:10086</a>
    <a href="weixin://addfriend/l670529375">微信:l670529375</a>
    <a href="mailto:670529375@qq.com">电子邮箱:670529375@qq.com</a>

    css

    chrome滚动条

    ::-webkit-scrollbar{width:10px;height:10px;}
    ::-webkit-scrollbar-track{background:#f9f9f9;}
    ::-webkit-scrollbar-track:hover{background:#efefef;}
    ::-webkit-scrollbar-thumb{border-radius:4px;background:#aaa;}
    ::-webkit-scrollbar-thumb:hover{background:#777;}
    ::-webkit-scrollbar-thumb:active{background:#666;}

    清浮动

    .clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;}
    .clearfix{zoom:1;}
    .clear{height:0;overflow:hidden;font-size:0;clear:both;}

    字体大小固定

    div{-webkit-text-size-adjust:none;text-size-adjust:none;}

    悬挂定位

    div{position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:50px;}

    最大最小宽高度

    div{max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");}
    div{min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");}
    div{min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");}
    div{min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");}

    背景透明图

    div{background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");}

    背景渐变

    div{background:-webkit-linear-gradient(top,#f9f9f9,#f1f1f1);background:-moz-linear-gradient(top,#f9f9f9,#f1f1f1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFf9f9f9',endColorstr='#FFf1f1f1',GradientType=0);background:linear-gradient(to bottom,#f9f9f9,#f1f1f1);}

    灰阶

    div{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);filter:gray;}

    透明度

    div{-webkit-opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;}

    阴影

    div{-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;}

    动画旋转

    div{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);}

    动画翻转

    div{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);transform:scale(-1, 1);}

    动画位移

    div{-webkit-transform:translate(50px,0);-moz-transform:translate(50px,0);transform:translate(50px,0);}

    动画持续时长

    div{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}

    盒模型边框

    div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    图片水平垂直居中

    div{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;}
    div i{position:static;+position:absolute;top:50%;}
    div img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}
    div{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}

    三角形

    div{width:0;height:0;border-bottom:10px solid #ccc;border-left:10px dotted transparent;border-right:10px dotted transparent;}

    英文字符换行

    div{word-break:break-all;word-wrap:break-word;}

    文本字符不换行

    div{white-space:nowrap;}

    文本字符超出隐藏

    div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

    伪类选择器

    div:first-child{color:#999;}
    div:last-child{color:#999;}
    div:nth-child(2n){color:#999;}
    div:nth-child(odd){color:#999;}
    div:nth-child(even){color:#999;}

    javascript

    判断手机端类型

    if(/android/i.test(navigator.userAgent)){
        ...
    };
    if(/ipad|iphone|mac/i.test(navigator.userAgent)){
        ...
    };

    判断手机用户

    复制代码
    var ua         = navigator.userAgent.toLowerCase();
    var isIpad     = ua.match(/ipad/i) == 'ipad';
    var isIphoneOs = ua.match(/iphone os/i) == 'iphone os';
    var isMidp     = ua.match(/midp/i) == 'midp';
    var isUc7      = ua.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
    var isUc       = ua.match(/ucweb/i) == 'ucweb';
    var isAndroid  = ua.match(/android/i) == 'android';
    var isCE       = ua.match(/windows ce/i) == 'windows ce';
    var isWM       = ua.match(/windows mobile/i) == 'windows mobile';
    if(isIpad || isIphoneOs || isMidp || isUc7 || isUc || isAndroid || isCE || isWM){
        location.href = '';
    };
    复制代码

    窗口准备开始时

    $(document).ready(function(){
        ...
    });

    窗口滚动时

    window.onscroll = function(){
        ...
    };

    窗口改变大小时

    window.onresize = function(){
        ...
    };

    窗口加载完时

    window.onload = function(){
        ...
    };

    新窗口控制

    window.open('','_blank','width=200,height=200,top=200,left=200);

    定时调用

    setInterval(function(){
        ...
    }, 1000);
    setTimeout(function(){
        ...
    }, 1000);

    图片加载状态

    复制代码
    var img = new Image();
    img.src = '';
    if(img.complete){
    };
    img.onload
    = function(){ };
    复制代码

    js文件加载状态

    复制代码
    var js = document.createElement('script');
    js.src = '';
    document.getElementsByTagName('head')[0].appendChild(js);
    if(js.readyState){ js.onreadystatechange = function(){ if(js.readyState == 'loaded' || js.readyState == 'complete'){ js.onreadystatechange = null; }; }; }else{ js.onload = function(){ }; };
    复制代码

    当前时间

    复制代码
    var date = new Date();
    date.getTime();
    date.setTime();
    date.getFullYear(); date.getMonth(); date.getDate(); date.getHours(); date.getMinutes(); date.getSeconds();
    复制代码

    创建元素

    var img           = document.createElement('img');
    img.src           = '';
    img.width         = 100px;
    img.height        = 30px;
    img.style.display = 'block';
    document.body.appendChild(img);

    历史记录

    history.back();
    document.referrer;

    userAgent

    navigator.userAgent;

    跨域

    document.domain = 'www';

    父窗口函数

    window.parent.fn();

    临时存储

    sessionStorage.setItem(key, value);
    sessionStorage.getItem(key);

    本地存储

    localStorage.setItem(key, value);
    localStorage.getItem(key);
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    关于模态/非模态对话框不响应菜单的UPDATE_COMMAND_UI消息(对对WM_INITMENUPOPUP消息的处理)
  • 原文地址:https://www.cnblogs.com/zhgt/p/4278433.html
Copyright © 2011-2022 走看看