日度归档:2020年6月18日

html标签中 url、href和src 有哪些不同呢?


摘要:
下文讲述html标签中url,href,src三种属性的区别,如下所示:


一、URL

URL(Uniform Resource Locator):
定位网上资源的链接(为服务器资源的链接地址),
此地址是互联网中资源的唯一地址。
例:

 
background:url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png)  


二 、href

href(Hypertext Reference):
超文本链接,可以通过href找到需要网络链接的位置,但是和url存在有一定的区别。
href属性值支持页面锚点链接
url不支持
还有href属性用于特殊的标签,例:导入css文件 导入js文件

 <link href="maomao365.css" rel="stylesheet" type="text/css">
 


三、src

src(Source): 文件资源路径,
用src导入文档路径的位置即可。
常用于img 标签,如下所示:

  <img src="maomao365.jpg"  />

css 如何实现一个简单的loading图标呢?


摘要:
下文讲述使用css样式代码生成一个loading图标的示例分享,如下所示:

实现思路:
    通过计算字符串拼接完成的时间戳减去字符串拼接开始的时间戳

例:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .divTest {
            width:88px;
            height:88px;
            position: fixed; 
            margin-left:12px;
        }

        .cssLoad {
            width: 70px;
            height: 70px;
            margin: 0 auto;
            border: 2px solid rgba(0,0,0,0.25);
            border-radius: 50%;
            border-left-color: transparent;
            border-right-color: transparent;
            animation: cssload-dongHua 575ms infinite linear;
            -o-animation: cssload-dongHua 575ms infinite linear;
            -ms-animation: cssload-dongHua 575ms infinite linear;
            -webkit-animation: cssload-dongHua 575ms infinite linear;
            -moz-animation: cssload-dongHua 575ms infinite linear;
        }
 
        @keyframes cssload-dongHua {
            100% {
                transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-o-keyframes cssload-dongHua {
            100% {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-ms-keyframes cssload-dongHua {
            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes cssload-dongHua {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes cssload-dongHua {
            100% {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>

</head>
<body>
<p>
 maomao365.com <br />
 css实现一个转动的等待框
</p>
<hr />
    <div class="divTest">
        <div class="cssLoad"></div>
    </div>
   
</body>
</html>
css实现一个loading等待图标的示例分享

css实现一个loading等待图标的示例分享

javascript如何测试字符串的拼接效率呢?


摘要:
下文讲述使用js代码拼接字符串的效率分析,如下所示:

实现思路:
    通过计算字符串拼接完成的时间戳减去字符串拼接开始的时间戳

例:


    <meta charset="utf-8" />
    <title>猫猫教程---字符串拼接示例分享</title>
    <p>
     maomao365.com <br />
     字符串拼接的效率分析
    </p>
    <hr />
    <script>
        var start = new Date();
        var str = "";
        for (var i = 0; i < 1000000; i++) {
            str += "test";
        }
        var end = new Date();
        document.writeln("+拼接字符串,耗时:" + (end.getMilliseconds() - start.getMilliseconds()));
        document.writeln("<br/>");
        var begin = new Date();
        var arry = new Array();
        for (var i = 0; i < 1000000; i++) {
            arry.push("test");
        }
        arry.join("");
        var stop = new Date();
        document.writeln("数组方式拼接字符串,耗时:" + (stop.getMilliseconds() - begin.getMilliseconds()));
    </script>