日度归档:2020年5月29日

javascript 如何使用js脚本查看对象结构呢?


摘要:
下文讲述使用js查看对象结构的方法分享,如下所示:

实现思路: 
    使用for In 关键字遍历一个对象,然后将对象的键值对转换为相应的字符串

例:

<meta charset='utf-8' />
<p>
 maomao365.com <br />
 js将对象转换为字符串的方法分享
</p>
<hr />
<script>
	Object.prototype.toStringExtend = function()
      {
       obj=this;
	   var description = "";
       for(var i in obj){
              var property=obj[i];
              description+=i+" = "+property+"\n";
       }
       return description; 
      }

var o ={webName:"猫猫教程",url:"http://maomao365.com"};
document.write(o.toStringExtend());
</script>
javascript js将对象扩展为字符串的方法分享

javascript js将对象扩展为字符串的方法分享

css 采用div定位的方式绘制一个安卓机器人的示例分享


摘要:
下文讲述使用css代码div拼接的模式绘制出的安卓机器人图标的示例分享,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #robot{
                width: 500px;
                height: 400px; 
                border: 4px solid lightgrey;
                position: relative;
            }
            #robot .header{
                width: 222px;
                height: 117px;
                background: blue;
                position: absolute;
                left: 189px;
                top: 60px;
            }
            #robot .header .eyel{
                position: absolute;
                left: 55px;
                top: 45px;
                width: 20px;
                height: 20px;
                background: #fff;
            }
            #robot .header .eyer{
                position: absolute;
                right: 55px;
                top: 45px;
                width: 20px;
                height: 20px;
                background: #fff;
            }
            #robot .earl{
                width: 10px;
                height: 26px;
                position: absolute;
                left: 229px;
                top: 34px;
                background: blue;
            }
            #robot .earr{
                width: 10px;
                height: 26px;
                position: absolute;
                left: 371px;
                top: 34px;
                background: blue;
            }
            #robot .body{
                width: 222px;
                height: 135px;
                background: blue;
                position: absolute;
                top: 187px;
                left: 189px;
            }
            #robot .arml{
                width: 30px;
                height: 98px;
                background: blue;
                position: absolute;
                left: 150px;
                top: 187px;
            }
            #robot .armr{
                width: 30px;
                height: 98px;
                background: blue;
                position: absolute;
                left: 420px;
                top: 187px;
            }
            #robot .legl{
                width: 30px;
                height: 73px;
                position: absolute;
                background: blue;
                top: 322px;
                left: 230px;
            }
            #robot .legr{
                width: 30px;
                height: 73px;
                position: absolute;
                background: blue;
                top: 322px;
                left: 340px;
            }
        </style>
    </head>
    <body>
     <p>
      maomao365.com <br />
      css绘制安卓机器人的示例分享
     </p>
     <hr />
        <div id="robot">
            <div class="header">
                <div class="eyel"></div>
                <div class="eyer"></div>
            </div>
            <div class="earl"></div>
            <div class="earr"></div>
            <div class="body"></div>
            <div class="arml"></div>
            <div class="armr"></div>
            <div class="legl"></div>
            <div class="legr"></div>
        </div>
    </body>
</html>
css绘制安卓机器人的示例分享

css绘制安卓机器人的示例分享

css 如何实现一个水晶按钮的效果呢?


摘要:
下文讲述使用css脚本实现一个水晶按钮的效果的方法分享,如下所示:

实现思路: 
    使用css线性渐变(linear-gradient)实现一个水晶按钮效果

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>猫猫教程(maomao365.com)
         水晶按钮示例分享
    </title>
        <style>
            #btn{
                display: block;
                width: 330px;
                height: 60px;
                border: 1px solid gray;
                background: -moz-linear-gradient(top,blue,#00ffff);
                background: -webkit-linear-gradient(top,blue,#00ffff);
                background: -o-linear-gradient(top,blue,#00ffff);
                background: -ms-linear-gradient(top,blue,#00ffff);
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
     <p>
      maomao365.com <br />
      css 水晶按钮的示例分享
     </p>
     <hr />
        <button id="btn"></button>
    </body>
</html>
css实现一个水晶按钮的示例分享

css实现一个水晶按钮的示例分享