js css题


0311lc.com说:

 

  1. 获取随机数的方法:Math.random();
  2. js中将变量强制改为浮点类型的方法:parseFloat()
  3. 根据ID获取元素的原生的js的方法:document.getElementById(‘id’)
  4. 将文档声明为HTML5文档类型、需要头部添加 <!DOCTYPE html>
  5. chrome 浏览器私有样式前缀 -webkit
  6. css3 设置圆角属性名:border-radius
  7. form 标签特有属性 请列出3个 action  method name  target  autocomplete  novalidate
  8. 正则表达  $ 表示什么意思: 匹配输入字符串的结束位置
  9. typeof ‘123’  返回什么  string
  10. 自定义浏览器兼容事件绑定方法需要注意什么问题
    1.标准dom添加事件是用addEventListener,ie6-8则是attachEvent。
      2.事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准
     3.我们常说的事件处理时的event属性,在标准浏览器其是传入的,IE下由window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
  11. 设计一个方案、使得页面在pc和pad端  显示为一行三列 在手机端为一列三行。
    样式:
    <style>
    .parent-fix {
    margin-left:-20px;
    }
    .parent {
    display:table;
    width:100%;
    table-layout:fixed;
    }
    .column {
    display:table-cell;
    padding-left:20px;
    }
    @media screen and (max-width:320px){
    .parent-fix {
    margin-left: 0;
    }
    .parent {
    display:block;
    width:100%;
    }
    .column {
    display:block;
    padding-left:0;
    }
    }
    </style>
         
    <div class="parent-fix">
             
      <div class="parent">
                 
        <div class="column">
        </div>
                 
        <div class="column">
        </div>
                 
        <div class="column">
        </div>
             
      </div>
         
    </div>
  12. jsonp 工作原理
    JSONP是处理跨域资源访问的。
        JSONP的原理是利用html页面中的script标签可跨域的原理,利用<script>标签向服务器端请求一段JS代码,
       然后,执行这段js代码,实现跨域的过程。
  13. (4)display和position都有哪些值?分别列举一下这些值的用途?
    display:block/inline/inline-block /table/table-cell/none
       position: relative/absolute/fixed/static
       display:block;/*当前元素以块级形式显示,默认宽度为父元素,可设定宽高,换行显示*/
       display:inline;/*当前元素以行内形式显示,默认宽度为内容宽度,不可设宽高,同行显示*/
       display:inline-block;/*显示时,默认宽度为内容宽度,可设宽高,同行显示*/
       display:table;/*显示规则和block相同,但是样式为table的样式*/
       display:table-cell;/*以table 单元格的样式显示*/
       display:none;/*元素小时,位置也不占*/
       position:relative;/*当前元素被设为相对定位,元素在文档流中,百分比的参照物是元素本身*/
       position:absolute;/*当前元素被设为绝对定位,元素脱离文档流,定位参照物:第一个定位祖先/根元素*/
       position:fixed;/*当前元素被设为固定定位,默认宽度为内容宽度,脱离文档流,参照物是视窗*/

     

    (5)地址栏输入一个地址后,输入回车,描述一下这是开始,浏览器做什么。
      1.在浏览器中输入要的网址:例如:facebook.com
      2.浏览器查找域名的IP地址
         导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下:
         浏览器缓存–浏览器会缓存DNS记录一段时间。但操作系统没有告诉浏览器存储的时间,这样各个浏览器会存储各自的
         一个固定的时间(2分钟到30分钟不等)。
         系统缓存–如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname)。这样便能获得系统缓存中      的记录。
         路由器缓存–接着,前面的查询请求发向路由器,它一般有自己的DNS缓存。
         ISP(互联网服务提供商) DNS缓存–接下来要检测的就是ISP的缓存DNS的服务器。在这一般都能找到相应的缓存记录。
         递归搜索–你的ISP的DNS服务器从根域名服务器开始进行递归搜索,从.com顶级域名服务器到facebook的域名服务器。一般DNS的缓存
    中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。
         但是,DNS有一点令人担忧,像wikipedia.org或者facebook.com这样的整个域名看上去就对应着一个单独的IP地址,还好有几种方法可以消除这个瓶颈:
        循环DNS:是DNS查找时返回多个IP时的解决方案。举例来说,facebook.com实际上就对应了4个IP地址。
        负载平衡器:是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能复杂平衡器。
       地理DNS根据用户所处的地理位置,通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态,但映射静态内容的话非常好。
      Anycast 是一个IP地址映射到多个物理主机的路由技术。美中不足,Anycast与TCP协议适应的不是很好,所以很少应用在那些方案中。
    大多数DNS服务器使用Anycast来请求高效低延迟的DNS查找。
    3.浏览器给web服务器发送一个HTTP请求
      因为像Facebook主页这样的动态页面,打开后在浏览器缓存中很快甚至马上就会过期,毫无疑问他们不能从缓存中读取,所以,浏览器将把一个请求发送到Facebook所在的服务器:
    4.facebook服务的永久重定向响应
    5.浏览器跟踪重定向地址
    6.服务器“处理”请求
    7.服务器发回一个HTML响应
    8.浏览器开始显示HTML
    9.浏览器发送获取嵌入在HTML中的对象
    10.浏览器发送异步(Ajax)请求
    5.应用题
    (1)创建一个js类,模拟实现方法的重载。
    function A(){
                this.a=null;
                this.b=null;
            }
            var pro = A.prototype;
            //模拟重载
            pro.add = function(){
                if(arguments.length==1){
                    console.log(arguments[0]);
                }
                if(arguments.length==2){
                    result = arguments[0]+arguments[1];
                    console.log(result);
                }
            }
            var a = new A();
            a.add(1);
            a.add(1,2);

    (2)JS中会有排序的需求,用jS实现一个标准的排序算法,对一个数字数组进行由小到大的排列。

    var b = [2,3,8,3,1,5];
            sort1(b);
            console.log(b);
            function sort1(a){
                var i,j;
                for(i=0;i<a.length;i++){
                    var temp;
                    var flag=0;
                    for(j=0;j<a.length;j++){
                        if(a[j]>a[j+1]){
                            temp = a[j+1];
                            a[j+1]=a[j];
                            a[j]=temp;
                            flag=1;
                        }
                    }
                    if(flag==0)break;
                }
                return a;
            }

    4.编程题

    用HTML、css和js魔力实现下拉框,使得下拉框在各个浏览器的样式和行为完全一致。说出你的设计方案,并且重点说明功能设计实现时要考虑的因素。

     

    1. 第二种方法css 法

       

      <!-- html 布局 -->
      <div id="selectStyle">
       <select id="select">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
       </select>
      </div>

      首先要去掉 #select 的默认样式:

      /* 去掉默认样式,设置新的样式 */
      #select{
          display:block;
          width:100%;
          height:100%;
          box-sizing:border-box;
          background:none;
          border:1px solid #222;
          outline:none;
          -webkit-appearance:none;
          padding:0 5px;
          line-height:inherit;
          color:inherit;
          cursor:default;
          font-size:14px;
          position:relative;
          z-index:3;
      }
      #select option{
          color:#222;
      }
      #select option:hover{
          color:#fff;
      }
      #select option:checked{
          background:#535353;
          color:#fff; 
      }

       

      然后在外层div#selectStyle设置自定义样式

      #selectStyle{
          display:block;
          margin:0 auto;
          overflow:hidden;
          height:30px;
          width:240px;
          border-radius:0;
          background:#535353 url("箭头图片地址") right center no-repeat;
          background-size:auto 80%;
          color:#fff;
          line-height:2;
          /* 如果不想加图片,
             则可以设置一个自己的三角形样式,
             如下的自定义方式,
             见代码1 */
          position:relative;
          z-index:1;
      }
      /* 代码1 */
      #selectStyle:before{
          position:absolute;
          z-index:1;
          top:50%;
          right:10px;
          margin-top:-2.5px;
          display:block;
          width:0;
          height:0;
          border-style:solid;
          border-width:5px 5px 0 5px;
          border-color:#fff transparent transparent transparent;
          content:"";
      }
      /* 代码1 */
      #selectStyle:after{
          position:absolute;
          z-index:1;
          top:50%;
          right:10px;
          margin-top:-3.5px;
          display:block;
          width:0;
          height:0;
          border-style:solid;
          border-width:5px 5px 0 5px;
          border-color:#535353 transparent transparent transparent;
          content:"";
      }

       

      上面纯css法

    下面 是js法

    <ul class="select">
    <li class="drop-down" onclick="selectShow()">
    <span id="reasontxt" class="bgimg-down">请选择退款原因</span>
    <ul class="drop-down-content">
    <li class="fs14 c_999">不喜欢/不想要</li>
    <li class="fs14 c_999">空包裹</li>
    <li class="fs14 c_999">未按照约定时间发货</li>
    <li class="fs14 c_999">快递物流一直未送达</li>
    <li class="fs14 c_999">货物破损已拒签</li>
    </ul>
    </li>
    </ul>
    
    
    <style>
    
    
    .reasonBox ul li span{
    
    display: block;
    text-decoration: none;
    height: 30px;
    width: 246px;
    line-height: 30px;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    padding-left: 10px;
    background-color: #fff;
    color: #999;
    font-size: 14px;
    
    }
    
    .reasonBox .drop-down{
    
    height: 30px;
    
    width: 256px;
    
    cursor: pointer;
    
    }
    
    .reasonBox .drop-down-content{
    
    position: absolute;
    
    display: none;
    
    overflow: hidden;
    
    width: 256px;
    
    background-color: #fff;
    
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
    
    border: 1px solid #ccc;
    
    border-radius: 4px;
    
    margin-top: 2px;
    
    }
    
    .reasonBox .drop-down-content li{
    
    height: 30px;
    
    line-height: 30px;
    
    padding-left: 10px;
    
    }
    
    .reasonBox .drop-down-content li:hover{
    
    background-color: #00D2C3;
    
    color: #fff;
    
    }
    
    .reasonBox .drop-down .active{
    
    display: block;
    
    }
    
    .reasonBox .bgimg-down{
    
    background: url(../images/aftersale/i_down.png) no-repeat 234px 8px;
    
    }
    
    .reasonBox .bgimg-up{
    
    background: url(../images/aftersale/i_up.png) no-repeat 234px 8px;
    
    }
    
    </style>
    
    
    
    
    
    <script type="text/javascript">
    
    //下拉框
    
    var selectFlag=false;
    
    function selectShow(){
    
    var contentDom=document.getElementsByClassName("drop-down-content")[0];
    
    var imgDOM=document.getElementById("reasontxt");
    
    selectFlag=!selectFlag;
    
    //展开
    
      if(selectFlag){
    
       contentDom.className=contentDom.className +" " + "active";
    
       imgDOM.className="bgimg-up";
    
      }else{
    
       contentDom.className="drop-down-content";
      
       imgDOM.className="bgimg-down";
    
     }
     
    }
    
    //监听选择退款原因点击事件
    
    function selector() {
        var ul = document.querySelectorAll(".drop-down ul")[0];
        ul.addEventListener('click',
        function(e) {
            var el = e.target
            while (el.tagName !== 'LI') {
                if (el == ul) {
                    el = null;
                    break;
                }
                el = el.parentNode
            }
            if (el) {
                document.getElementById("reasontxt").innerHTML = el.innerHTML
            }
        },
        false);
    }
    
    window.onload=function(){
    
         selector()
    
    }
    
    </script>

    通过ID获取(getElementById)
    通过name属性(getElementsByName)
    通过标签名(getElementsByTagName)

    通过类名(getElementsByClassName)
    通过选择器获取一个元素(querySelector)
    通过选择器获取一组元素(querySelectorAll)
    获取html的方法(document.documentElement)
    document.documentElement是专门获取html这个标签的
    获取body的方法(document.body)
    document.body是专门获取body这个标签的。
    1.通过ID获取(getElementById)

    document.getElementByIdx_x('id')

    上下文必须是document。
    必须传参数,参数是string类型,是获取元素的id。
    返回值只获取到一个元素,没有找到返回null。
    2.通过name属性(getElementsByName)

    document.getElementsByName('name')

    上下文必须是document。内容
    必须传参数,参数是是获取元素的name属性。
    返回值是一个类数组,没有找到返回空数组。
    3.通过标签名(getElementsByTagName)

    var obj = document.getElementsByTagName_r('div');
    for(let i = 0; i){
    obj[i].onclick = function(e){
    console.log(i)
    }
    }

    上下文可以是document,也可以是一个元素,注意这个元素一定要存在。
    参数是是获取元素的标签名属性,不区分大小写。
    返回值是一个类数组,没有找到返回空数组
    4.通过类名(getElementsByClassName

    var obj1 = document.getElementsByClassName('animated')
    // console.log
    0:div.app.animated
    1:div#login.login.animated.rubberBand
    2:div#reg.reg.animated.shake
    3:div#kefu.kefu.animated.swing
    4:div#LoginState.state.animated.bounce
    5:div.loginState.animated
    6:div.regState.animated
    7:div.pop.animated

    上下文可以是document,也可以是一个元素。
    参数是元素的类名。
    返回值是一个类数组,没有找到返回空数组。
    5.通过选择器获取一个元素(querySelector)

    document.querySelector('.animated')

    上下文可以是document,也可以是一个元素。
    参数是选择器,如:”div .className”。
    返回值只获取到第一个元素。
    6.通过选择器获取一组元素(querySelectorAll)

    document.querySelector('.animated')

    上下文可以是document,也可以是一个元素。
    参数是选择器,如:”div .className”。
    返回值是一个类数组。


发表评论

电子邮件地址不会被公开。 必填项已用*标注