分类 HTML 下的文章
HTML

console.log 输出字体颜色

在正常模式下，一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读，除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息

在输出信息前面会有一个带感叹号的黄色三角警告符号。似乎比一般的console信息要友好得多了。虽然图标是黄色的，但输出的文字仍然是黑色。

另外经常用到的是输出错误信息。可以通过调用console.erro() 来实现。

信息前面会出现一个带叉的红色圆形图标。

这个效果要比警告信息更友好了，字体颜色成红色了。

要更牛叉莫过于对文字应用样式。而现在这一特性已经在谷歌浏览器里实现了。

在Chrome的开发者工具里，console 可以加样式，可以显示缤纷的颜色，甚至图片。简直爽翻了。

具体来说，是可以对输出到console控制台的文字进行CSS控制。

格式如下：

console.log()    // 打印日志
console.debug()  // 打印调试
console.error()  // 打印错误
console.info()   // 打印信息
console.warn()   // 打印警告
console.assert() // 打印断言
console.clear()  // 清空
%c表示css样式
console.log('%cHello', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');

%d表示数字
console.log('%d', 123);

%i表示整型数字
console.log('%i', 123);

%o表示DOM元素
console.log('%o', document.body);

%O表示javascript对象
console.log('%O', new Date());
阅读全文
2021-09-02 2 条评论
JQUERYHTML

Jquery:属性选择器（同时匹配多个条件,与或非）

前言

在处理ESA中的table内js代码的时候出现了问题，主要是为了让同一个div下的不同选项来处理不同的操作，为了处理除了两项不符合条件外的选择，需要用到jquery选择器的多个条件匹配来处理，然后整理了一下相关的与或非的条件及其组合。

代码

// 内部操作监听
$(elem).on("click",".esa-table-body [esa-event][esa-event!='checkbox'][esa-event!='radio']",function(e){
                
})
// 头尾时间监听
$(elem).on("click",".esa-table-head [esa-event],.esa-table-foot [esa-event],.esa-table-body [esa-event='checkbox'],[esa-event='radio']",function(e){
                
})

示例

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://blog.bug-maker.com/admin/js/jquery.js?v=17.10.30"></script>
    <script type="text/javascript">
 
    $().ready(function(){
         
        debugger;// open console and click F10
        //多条件选择
        $('#table1 #td1-1,#td1-2').css('color','red');
        //选择内容不是id=td1
        $('#table2 tbody td:not(#td2-1)').css('color','green');
        //选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素
        $('#table3 [attr1="a1"][attr2="a2"]').css('color','blue');
        //选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素
        $('#table4 [attr1="a1"],#table4 [attr2="a2"]').css('color','yellow');
 
        //选择不满足 条件1 attr1="a1" 的元素
        $('#table5 tbody td[attr1!="a1"]').css('color','purple');
         
        //选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素
        $('#table6 tbody td:not([attr1="a1"],[attr2="a2"])').css('color','red');
        $('#table6 tbody td[attr1!="a1"][attr2!="a2"]').css('color','red');
 
        //选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素
        $('#table7 tbody td:not([attr1="a1"][attr2="a2"])').css('color','red');
        $('#table7 tbody td([attr1!="a1"],[attr2!="a2"])').css('color','red');
 
        //选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2"， 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素
        $('#table8 tbody td([attr1!="a1"],[attr2!="a2"])').css('color','red');
    })
 
    </script>
</head>
<body>
    <p>第一个：多条件选择</p>
    <table border="1px" id="table1">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td1-1">1</td><td id="td1-2">2</td><td id="td1-3" attr1="a1" attr2="a2">3</td><td id="td1-4" attr1="a1">4</td><td id="td1-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择内容不是id=td1</p>
    <table border="1px" id="table2">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td2-1">1</td><td id="td2-2">2</td><td id="td2-3" attr1="a1" attr2="a2">3</td><td id="td2-4" attr1="a1">4</td><td id="td2-5">5</td></tr></tbody>
    </table>
    <p>第三个：选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table3">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td3-1">1</td><td id="td3-2">2</td><td id="td3-3" attr1="a1" attr2="a2">3</td><td id="td3-4" attr1="a1">4</td><td id="td3-5">5</td></tr></tbody>
    </table>
    <p>第四个：选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table4">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td4-1">1</td><td id="td4-2">2</td><td id="td4-3" attr1="a1" attr2="a2">3</td><td id="td4-4" attr1="a1">4</td><td id="td4-5">5</td></tr></tbody>
    </table>
    <p>第五个：选择不满足 条件1 attr1="a1" 的元素</p>
    <table border="1px" id="table5">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td5-1">1</td><td id="td5-2">2</td><td id="td5-3" attr1="a1" attr2="a2">3</td><td id="td5-4" attr1="a1">4</td><td id="td5-5">5</td></tr></tbody>
    </table>
    <p>第六个：选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table6">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td6-1">1</td><td id="td6-2">2</td><td id="td6-3" attr1="a1" attr2="a2">3</td><td id="td6-4" attr1="a1">4</td><td id="td6-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table7">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td7-1">1</td><td id="td7-2">2</td><td id="td7-3" attr1="a1" attr2="a2">3</td><td id="td7-4" attr1="a1">4</td><td id="td7-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2"， 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素</p>
    <table border="1px" id="table7">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td8-1">1</td><td id="td8-2">2</td><td id="td8-3" attr1="a1" attr2="a2">3</td><td id="td8-4" attr1="a1">4</td><td id="td8-5">5</td></tr></tbody>
    </table>
</body>
</html>　　
阅读全文
2021-04-08 0 条评论
HTMLCSS

CSS:鼠标悬停整体上升

驻场管委会需要个悬停的效果：

.mouse_onshow{background:white;margin:0 5px;}
.mouse_onshow:hover{
    transform:translate(0,-10px);  
 　　-webkit-transform:translate(0,-10px);    
　　-moz-transform:translate(0,-10px);    
　　-o-transform:translate(0,-10px);    
　　-ms-transform:translate(0,-10px);
    box-shadow:0px 5px 20px #ccc;
}

1.鼠标悬停图片变大

:hover {

　　-webkit-transform: scale(1.1);

　　-moz-transform: scale(1.1);

　　-o-transform: scale(1.1);

　　-ms-transform: scale(1.1);

}

缓慢变化需要在包住图片的外层加上：-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

变大不超出的话就加上overflow:hidden;

2.鼠标悬停整体旋转

:hover {

　　transform:rotate(360deg);

　　-webkit-transform:rotate(360deg);

　　-moz-transform:rotate(360deg);

　　-o-transform:rotate(360deg);

　　-ms-transform:rotate(360deg);

}

缓慢变化需要在包住图片的外层加上：transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;

3.鼠标悬停整体旋转放大

:hover {

　　transform:rotate(360deg) scale(1.2);

　　-webkit-transform:rotate(360deg) scale(1.2);

　　-moz-transform:rotate(360deg) scale(1.2);

　　-o-transform:rotate(360deg) scale(1.2);

　　-ms-transform:rotate(360deg) scale(1.2);

}

缓慢变化需要在包住图片的外层加上：transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;

4.鼠标悬停整体上升

:hover {

　　transform:translate(0,-10px);

　　-webkit-transform:translate(0,-10px);

　　-moz-transform:translate(0,-10px);

　　-o-transform:translate(0,-10px);

　　-ms-transform:translate(0,-10px);

}

缓慢变化需要在包住图片的外层加上：transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;

需要上升载加一点阴影(加在hover里面)：box-shadow:0px 5px 20px #ccc;

阅读全文
2020-12-18 0 条评论
HTML

CSS:画圆点连线

这回再高新管委会驻场，需要到一个效果，没办法，只能手写 ，来吧！
微信图片编辑_20201216083415.jpg

先来个网上的示例，这个是个动画效果

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .day-05 {
                background: #01161e;
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
            }
            .day-05 .container {
                width: 500px;
                height: 500px;
                margin: auto;
                position: relative;
            }
            .day-05 .container .geom {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            .day-05 .container .geom:nth-child(1) {
                transform: rotate(25deg);
                animation: rotateScale2 6s 1s ease-in-out infinite alternate, appear 6s 1s ease-in-out forwards;
            }
            @keyframes rotateScale1 {
                0% {
                    transform: rotate(20deg);
                }
                50% {
                    transform: rotate(-160deg) scale(0.1);
                }
                100% {
                    transform: rotate(-340deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(2) {
                transform: rotate(50deg);
                animation: rotateScale2 3s 0.6s ease-in-out infinite alternate, appear 3s 0.6s ease-in-out forwards;
            }
            @keyframes rotateScale2 {
                0% {
                    transform: rotate(40deg);
                }
                50% {
                    transform: rotate(220deg) scale(0.1);
                }
                100% {
                    transform: rotate(400deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(3) {
                transform: rotate(75deg);
                animation: rotateScale2 6s 3s ease-in-out infinite alternate, appear 6s 3s ease-in-out forwards;
            }
            @keyframes rotateScale3 {
                0% {
                    transform: rotate(60deg);
                }
                50% {
                    transform: rotate(-120deg) scale(0.1);
                }
                100% {
                    transform: rotate(-300deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(4) {
                transform: rotate(100deg);
                animation: rotateScale4 3s 1.2s ease-in-out infinite alternate, appear 3s 1.2s ease-in-out forwards;
            }
            @keyframes rotateScale4 {
                0% {
                    transform: rotate(80deg);
                }
                50% {
                    transform: rotate(260deg) scale(0.1);
                }
                100% {
                    transform: rotate(440deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(5) {
                transform: rotate(125deg);
                animation: rotateScale2 6s 5s ease-in-out infinite alternate, appear 6s 5s ease-in-out forwards;
            }
            @keyframes rotateScale5 {
                0% {
                    transform: rotate(100deg);
                }
                50% {
                    transform: rotate(-80deg) scale(0.1);
                }
                100% {
                    transform: rotate(-260deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(6) {
                transform: rotate(150deg);
                animation: rotateScale6 3s 1.8s ease-in-out infinite alternate, appear 3s 1.8s ease-in-out forwards;
            }
            @keyframes rotateScale6 {
                0% {
                    transform: rotate(120deg);
                }
                50% {
                    transform: rotate(300deg) scale(0.1);
                }
                100% {
                    transform: rotate(480deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(7) {
                transform: rotate(175deg);
                animation: rotateScale2 6s 7s ease-in-out infinite alternate, appear 6s 7s ease-in-out forwards;
            }
            @keyframes rotateScale7 {
                0% {
                    transform: rotate(140deg);
                }
                50% {
                    transform: rotate(-40deg) scale(0.1);
                }
                100% {
                    transform: rotate(-220deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(8) {
                transform: rotate(200deg);
                animation: rotateScale8 3s 2.4s ease-in-out infinite alternate, appear 3s 2.4s ease-in-out forwards;
            }
            @keyframes rotateScale8 {
                0% {
                    transform: rotate(160deg);
                }
                50% {
                    transform: rotate(340deg) scale(0.1);
                }
                100% {
                    transform: rotate(520deg) scale(1);
                }
            }
            .day-05 .container .geom:nth-child(odd) .vertice {
                background: #0fe5b0;
            }
            .day-05 .container .geom:nth-child(odd) .vertice::before,
            .day-05 .container .geom:nth-child(odd) .vertice::after {
                background: #0fe5b0;
            }
            .day-05 .container .geom:nth-child(even) .vertice {
                background: #fff;
            }
            .day-05 .container .geom:nth-child(even) .vertice::before,
            .day-05 .container .geom:nth-child(even) .vertice::after {
                background: #fff;
            }
            .day-05 .container .geom .vertice {
                position: absolute;
            }
            .day-05 .container .geom .vertice::before,
            .day-05 .container .geom .vertice::after {
                content: "";
                position: absolute;
            }
            .day-05 .container .geom .vertice-1,
            .day-05 .container .geom .vertice-5 {
                height: 2px;
                left: 166px;
                width: 166px;
            }
            .day-05 .container .geom .vertice-1::before,
            .day-05 .container .geom .vertice-5::before {
                left: -9px;
                top: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-1::after,
            .day-05 .container .geom .vertice-5::after {
                right: -9px;
                top: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-5 {
                bottom: 0;
            }
            .day-05 .container .geom .vertice-6,
            .day-05 .container .geom .vertice-7,
            .day-05 .container .geom .vertice-8 {
                width: 2px;
                left: 0;
                height: 234px;
            }
            .day-05 .container .geom .vertice-6 {
                transform: rotate(-45deg);
                top: 334px;
            }
            .day-05 .container .geom .vertice-8 {
                transform: rotate(-135deg);
                top: 166px;
            }
            .day-05 .container .geom .vertice-2 {
                transform: rotate(135deg);
                top: 166px;
            }
            .day-05 .container .geom .vertice-4 {
                transform: rotate(45deg);
                top: 334px;
            }
            .day-05 .container .geom .vertice-2,
            .day-05 .container .geom .vertice-3,
            .day-05 .container .geom .vertice-4 {
                width: 2px;
                right: 0;
                height: 234px;
            }
            .day-05 .container .geom .vertice-3,
            .day-05 .container .geom .vertice-7 {
                height: 166px;
                top: 166px;
            }
            .day-05 .container .geom .vertice-3::before,
            .day-05 .container .geom .vertice-7::before {
                left: -9px;
                top: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-3::after,
            .day-05 .container .geom .vertice-7::after {
                left: -9px;
                bottom: -9px;
                width: 20px;
                height: 20px;
                border-radius: 100%;
            }
            .day-05 .container .geom .vertice-6,
            .day-05 .container .geom .vertice-8,
            .day-05 .container .geom .vertice-2,
            .day-05 .container .geom .vertice-4 {
                transform-origin: 0 0;
            }
            @keyframes appear {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            @keyframes heightSpan {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="day-05">
            <div class="container">
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
                <div class="geom">
                    <span class="vertice vertice-1"></span>
                    <span class="vertice vertice-2"></span>
                    <span class="vertice vertice-3"></span>
                    <span class="vertice vertice-4"></span>
                    <span class="vertice vertice-5"></span>
                    <span class="vertice vertice-6"></span>
                    <span class="vertice vertice-7"></span>
                    <span class="vertice vertice-8"></span>
                </div>
            </div>
        </div>
    </body>
</html>
阅读全文
2020-12-16 0 条评论