面试题三(6道)

1. 简述超链接target属性的取值和作用


描述
_blank在新窗口中打开被链接文档。
_self默认值。在当前窗口或者框架中加载目标文档。
_parent在父框架集中打开被链接文档。当 a 标签本身在顶层时,则与 _self 相同。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。
‘任意字符’若该链接不是已打开的页面,则在新窗口中打开,与_blank一致;若该链接已经打开,则跳转到该标签页并刷新页面

2. CSS3新增伪类有哪些并简要描述


CSS3伪类作用
:root文档根元素,总是返回html
:last-child, :only-child, :only-of-type文本的最后一个 / 唯一一个 / 指定类型的唯一一个 子元素
:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n),第n个 / 倒数第n个 / 指定类型的第n个 / 指定类型的倒数第n个 子元素
:enabled, :disabled启用 / 禁用
:checked已勾选
:default默认,例如radio group中默认选中的radio
:valid, :invalid, :required, :optional, :in-range, :out-of-range校验有效 / 校验无效 / 必填 / 非必填 / 限定范围内 / 限定范围外的 input
:not()括号内条件取反
:empty没有子元素的元素
:targetURL片段标识符指向的元素

3. 写一个把字符串大小写切换的方法


写法一:

function caseConvert(str) {
  return str.split('').map(s => {
    const code = s.charCodeAt();
    if (code < 65 || code > 122 || code > 90 && code < 97) return s;
    
    if (code <= 90) {
      return String.fromCharCode(code + 32)
    } else {
      return String.fromCharCode(code - 32)
    }
  }).join('')
}

console.log(caseConvert('AbCdE')) // aBcDe 

function caseConvertEasy(str) {
  return str.split('').map(s => {
    if (s.charCodeAt() <= 90) {
      return s.toLowerCase()
    }
    return s.toUpperCase()
  }).join('')
}

console.log(caseConvertEasy('AbCxYz')) // aBcXyZ 

写法二:

function caseConvert(str) {
    return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2) => {
        return `${s1.toUpperCase()}${s2.toLowerCase()}`
    })
}
console.log(caseConvert('AsA33322A2aa')); //aSa33322a2AA

写法三:

let str = 'aBcDeFgH'
let arr = []
for(let item of str) {
  if (item === item.toUpperCase()) {
    item = item.toLowerCase()
  } else {
    item = item.toUpperCase()
  }
  arr.push(item)
}
let newStr = arr.join('')
console.log(newStr)
// AbCdEfGh

在这里插入图片描述

4. label都有哪些作用?并举相应的例子说明


label 标签为input元素定义标注(标记)。
label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label元素内点击文本,就会触发此控件。就是说,当用zhi户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

  • 利用label"模拟"button来解决不同浏览器原生button样式不同的问题
<input type="button" id="btn">
<label for="btn">Button</label>

<style>
input[type='button'] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 20px;
  background: #456;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
  border-radius: 2px;
}
</style>
  • 结合checkboxradio表单元素实现纯CSS状态切换,这样的实例就太多了。比如控制CSS动画播放和停止。下面是一部分代码。详细实例地址
<input type="checkbox" id="controller">
<label class="icon" for="controller">
  <div class="play"></div>
  <div class="pause"></div>
</label>
<div class="animation"></div>

<style>
...
#controller:checked ~ .animation {
  animation-play-state: paused;
}
...
</style>

还有一个基于 radio 的实例:摩斯密码键盘

  • inputfocus事件会触发锚点定位,我们可以利用label当触发器实现选项卡切换效果。下面代码选自张鑫旭《CSS世界》。实际效果链接
<div class="box">
  <div class="list"><input id="one" readonly>1</div>
  <div class="list"><input id="two" readonly>2</div>
  <div class="list"><input id="three" readonly>3</div>
  <div class="list"><input id="four" readonly>4</div>
</div>
<div class="link">
  <label class="click" for="one">1</label>
  <label class="click" for="two">2</label>
  <label class="click" for="three">3</label>
  <label class="click" for="four">4</label>
</div>

<style>
.box {
  width: 20em;
  height: 10em;
  border: 1px solid #ddd;
  overflow: hidden;
}
.list {
  height: 100%;
  background: #ddd;
  text-align: center;
  position: relative;
}
.list > input { 
  position: absolute; top:0; 
  height: 100%; width: 1px;
  border:0; padding: 0; margin: 0;
  clip: rect(0 0 0 0);
}
</style>

5. 用css创建一个三角形,并简述原理


创建一个div,宽高都为0,实现效果如下,发现border的四个边都是一个三角形,要实现三角形只需将其中几个边background设置为transparent,即可得到三角形

<div class='rect'></div>
<style>
    .rect {
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid rgb(34, 230, 220);
      border-left: 100px solid rgb(202, 146, 25);
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid rgb(16, 204, 101);
    }
</style>

在这里插入图片描述

.rect {
    width: 0;
    height: 0;
    background-color: #fff;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-top: 100px solid rgb(29, 156, 194);
    border-bottom: 100px solid transparent;
}

在这里插入图片描述

6. 写一个去除制表符和换行符的方法


<script>
    /**
     * \f  匹配换页字符。
     * \n  匹配换行字符。
     * \r  匹配回车符字符。
     * \t  匹配制表字符。
     * \v  匹配垂直制表符。
     * @param str
     * @returns {void | string}
     */
    const removeEmpty = (str) => str.replace(/[\t\n\v\r\f]/g, "");

    console.log(removeEmpty(`大家好\n早上好\t蛤?`))
</script>

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值