js之百度前端学院底16-17-18-19天

最新推荐文章于 2021-11-26 17:22:26 发布

bleach777

最新推荐文章于 2021-11-26 17:22:26 发布

阅读量147

点赞数 1

分类专栏：前端相关记录（html/css/js/vue）

本文链接：https://blog.csdn.net/a037777777/article/details/101364449

版权

前端相关记录（html/css/js/vue）专栏收录该内容

17 篇文章 0 订阅

订阅专栏

string转数值：Number(string)
判断输入是否是数字：isNaN(input.value)
数值转string：number.toString()
字符串匹配：string.match(“正则表达式或者某个字符”) 比如：str.match(“3”)匹配str是否含有3，匹配则返回true
PS：html表格边框设置
1、设置table的CSS为{border-collapse:collapse;border:none;}
2、再设置td的CSS为{border:solid #000 1px;}
可以在js中写html标签注意标签中的双引号要用\转义
类似getElementByTagName、getElementByClassName、getElementById、querySelectorAll的parentNode必须是一个而非多个。若x是个列表即不是一个，则会报错
16源码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>百度前端技术学院-第十六天</title>
</head>

<body>
  <h3>Demo</h3>
  <p id="content-wrapper">Hello World</p>
  <hr>
  <h3 id="welcome">Who are you?</h3>
  <input type="text" id="name" placeholder="请输入名字">
  <button id="button">发送</button>
  <hr>
  <h3>运算</h3>
  <input type="text" id="num1" placeholder="请输入第一个数字">
  <input type="text" id="num2" placeholder="请输入第二个数字">
  <button id="add">加</button>
  <button id="sub">减</button>
  <button id="mul">乘</button>
  <button id="div">除</button>
  <p id="result">运算结果：</p>
  <script>
    //
    console.log(document.getElementById("content-wrapper").innerHTML);
    //
    document.getElementById('button').onclick = function () {
      document.getElementById('welcome').innerHTML = 'hello~' + document.getElementById('name').innerHTML
    }
    //
    document.getElementById('add').onclick = function(){
      var rel = parseInt(document.getElementById('num1').value) + parseInt(document.getElementById('num2').value)
      document.getElementById('result').innerHTML = '运算结果为：'+ rel
    }
    document.getElementById('sub').onclick = function(){
      var rel = parseInt(document.getElementById('num1').value) - parseInt(document.getElementById('num2').value)
      document.getElementById('result').innerHTML = '运算结果为：'+ rel
    }
    document.getElementById('mul').onclick = function(){
      var rel = parseInt(document.getElementById('num1').value) * parseInt(document.getElementById('num2').value)
      document.getElementById('result').innerHTML = '运算结果为：'+ rel
    }
    document.getElementById('div').onclick = function(){
      var rel = parseInt(document.getElementById('num1').value) / parseInt(document.getElementById('num2').value)
      document.getElementById('result').innerHTML = '运算结果为：'+ rel
    }
  </script>
</body>

</html>

17-18源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>百度前端技术学院-第十七十八天</title>
</head>

<body>
  <h3>运算</h3>
  <input type="text" id="num1" placeholder="请输入第一个数字">
  <input type="text" id="num2" placeholder="请输入第二个数字">
  <button id="add">加</button>
  <button id="sub">减</button>
  <button id="mul">乘</button>
  <button id="div">除</button>
  <p id="result">运算结果：</p>
  <hr>

  <h3>十进制转二进制</h3>
  <input type="text" id="num3" placeholder="请输入一个十进制非负整数">
  <button id="change">转化</button>
  <p id="changeResult">转化结果：</p>
  <hr>

  <h3>十进制转二进制(控制输出位数)</h3>
  <input type="text" id="num4" placeholder="请输入一个十进制非负整数">
  <input type="text" id="num5" placeholder="请输入转化后的二进制位数">
  <button id="change_">转化</button>
  <p id="changeResult_">转化结果：</p>
  <hr>

  <h3>3的小游戏</h3>
  <h6>输出1-100，若某数为3的倍数或者含3，则输出PA</h6>
  <button id="out">输出</button>
  <p id="outContent"></p>
  <hr>

  <h3>九九乘法表</h3>
  <h6>用表格显示九九乘法表</h6>
  <button id="show">显示</button>
  <table id="showContent" style="border-collapse:collapse;border:none">
  </table>
  <script>
    document.getElementById('add').onclick = function () {
      if (isNaN(document.getElementById('num1').value) || isNaN(document.getElementById('num2').value)) {
        alert('请输入数字')
      } else {
        var rel = Number(document.getElementById('num1').value) + Number(document.getElementById('num2').value)
        document.getElementById('result').innerHTML = '运算结果为：' + rel
      }
    }
    document.getElementById('sub').onclick = function () {
      if(isNaN(document.getElementById('num1').value) || document.getElementById('num2').value){
        alert('请输入数字')
      }else{
        var rel = parseInt(document.getElementById('num1').value) - parseInt(document.getElementById('num2').value)
      document.getElementById('result').innerHTML = '运算结果为：' + rel
      }
    }
    document.getElementById('mul').onclick = function () {
      if(isNaN(document.getElementById('num1').value) || isNaN(document.getElementById('num2').value)){
        alert('请输入数字')
      }else{
        var rel = parseInt(document.getElementById('num1').value) * parseInt(document.getElementById('num2').value)
      document.getElementById('result').innerHTML = '运算结果为：' + rel
      }
    }
    document.getElementById('div').onclick = function () {
      if(isNaN(document.getElementById('num1').value) || isNaN(document.getElementById('num2').value)){
        alert('请输入数字')
      }else if (Number(document.getElementById('num2').value) == 0) {
        alert('除数不能为0')
        document.getElementById('result').innerHTML = '运算结果为：'
      } else {
        var rel = parseInt(document.getElementById('num1').value) / parseInt(document.getElementById('num2').value)
        document.getElementById('result').innerHTML = '运算结果为：' + rel
      }
    }
    //
    document.getElementById('change').onclick = function(){
      var x = Number(document.getElementById('num3').value)
      var y = 1
      var rel = ""
      for(var i = 0;x > 1;i++){
        y = parseInt(x % 2)
        rel += y.toString()
        x = parseInt(x / 2)
      }
      rel += "1"
      document.getElementById('changeResult').innerHTML = '转化结果为：'+rel.split('').reverse().join('')
    }
    //
    document.getElementById('change_').onclick = function(){
      var x = Number(document.getElementById('num4').value)
      var y = 1
      var rel = ""
      for(var i = 0;x > 1;i++){
        y = parseInt(x % 2)
        rel += y.toString()
        x = parseInt(x / 2)
      }
      rel += "1"
      var z = Number(document.getElementById('num5').value)
      if(rel.length > z){
        document.getElementById('changeResult_').innerHTML = '转化结果为：'+rel.split('').reverse().join('')
        alert('转化后位数超出要求位数')
      }else if(rel.length == z){
        document.getElementById('changeResult_').innerHTML = '转化结果为：'+rel.split('').reverse().join('')
      }else{
        for(var i = 0;i <= (z-rel.length);i++){
          rel += "0"
        }
        document.getElementById('changeResult_').innerHTML = '转化结果为：'+rel.split('').reverse().join('')
      }
    }
    //
    document.getElementById('out').onclick = function(){
      var outContent_ = ""
      for(var i = 1;i <= 100;i++){
        if((i % 3) == 0 || i.toString().match("3")){
          outContent_ += "PA"
          outContent_ += " "
        }else{
          outContent_ += i.toString()
          outContent_ += " "
        }
        document.getElementById('outContent').innerHTML = outContent_
      }
    }
    //
    document.getElementById('show').onclick = function(){
      var showContent_ = ""
      for(var i = 1;i <= 9;i++){
        showContent_ += "<tr>"
        for(var j = 1;j <= 9;j++){
          if(j < i){
            showContent_ += "<td style=\"border:solid #000 1px\"></td>"
          }else{
            showContent_ += "<td style=\"border:solid #000 1px\">"+i+"*"+j+"="+(i*j)+"</td>"
          }
        }
        showContent_ += "</tr>"
      }
      document.getElementById('showContent').innerHTML = showContent_
    }
  </script>
</body>

</html>

19源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>百度前端技术学院-第十九天</title>
</head>

<body>
  <div id="wrapper">
    <div id="news-top" class="section1">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li><span>HTML</span><a href="">Some Link1</a></li>
          <li><span>JS</span><a class="active" href="">Some Link2</a></li>
          <li><span>CSS</span><a class="active" href="">Some Link3</a></li>
          <li><span>JS</span><a href="">Some Link4</a></li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
    <div id="news-normal" class="section2">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li><span>HTML</span><a href="">Some Link1</a></li>
          <li><span>HTML</span><a href="">Some Link2</a></li>
          <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
          <li><span>CSS</span><a href="">Some Link4</a></li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
    <script>
      console.log('getElementById')
      console.log(getAllListItem())
      console.log(findAllHtmlSpanInOneSection('news-top'))
      console.log(findListItem('news-top', 'JS'))
      console.log(getActiveLinkContent('news-top'))
      function getAllListItem() {
        // 返回页面中所有li标签
        var x = document.getElementsByTagName('li')
        var f = new Array()
        for (var i = 0; i < x.length; i++) {
          f.push(x[i])
        }
        return f
      }

      function findAllHtmlSpanInOneSection(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
        var x = document.getElementById(sectionId)
        var y = x.getElementsByTagName('span')
        var f = new Array()
        for (var i = 0; i < y.length; i++) {
          if (y[i].innerHTML == "HTML") {
            f.push(y[i])
          }
        }
        return f
      }

      function findListItem(sectionId, spanCont) {
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
        var x = document.getElementById(sectionId)
        var y = x.getElementsByTagName('span')
        var f = new Array()
        for (var i = 0; i < y.length; i++) {
          if (y[i].innerHTML == spanCont) {
            f.push(y[i])
          }
        }
        return f
      }

      function getActiveLinkContent(sectionId) {
        // 返回某个section下，class为active的链接中包含的文字内容
        var x = document.getElementById(sectionId).getElementsByTagName('a')
        var f = new Array()
        for (var i = 0; i < x.length; i++) {
          if (x[i].className == 'active') {
            f.push(x[i].innerHTML)
          }
        }
        return f
      }

      //
      console.log('querySelectorAll')
      console.log(getAllListItem_())
      console.log(findAllHtmlSpanInOneSection_('news-top'))
      console.log(findListItem_('news-top', 'JS'))
      console.log(getActiveLinkContent_('news-top'))
      function getAllListItem_() {
        // 返回页面中所有li标签
        var x = document.querySelectorAll('li')
        var f = new Array()
        for (var i = 0; i < x.length; i++) {
          f.push(x[i])
        }
        return f
      }

      function findAllHtmlSpanInOneSection_(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
        var x = document.getElementById(sectionId)
        var y = x.querySelectorAll('span')
        var f = new Array()
        for (var i = 0; i < y.length; i++) {
          if (y[i].innerHTML == "HTML") {
            f.push(y[i])
          }
        }
        return f
      }

      function findListItem_(sectionId, spanCont) {
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
        var x = document.getElementById(sectionId)
        var y = x.querySelectorAll('span')
        var f = new Array()
        for (var i = 0; i < y.length; i++) {
          if (y[i].innerHTML == spanCont) {
            f.push(y[i])
          }
        }
        return f
      }

      function getActiveLinkContent_(sectionId) {
        // 返回某个section下，class为active的链接中包含的文字内容
        var x = document.getElementById(sectionId)
        var y = x.querySelectorAll('a.active')
        var f = new Array()
        for (var i = 0; i < y.length; i++) {
            f.push(y[i].innerHTML)
        }
        return f
      }
    </script>
</body>

</html>