JavaScript(webAPI)【随机点名案例】

ForeverCodinging

已于 2022-03-27 18:40:28 修改

阅读量659

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-03-24 23:45:02 首次发布

本文链接：https://blog.csdn.net/weixin_49534407/article/details/123724808

版权

JavaScript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

【随机点名案例】
需求：将名字放入span 盒子内部
分析：
①：获取span 元素
②：得到随机的名字
③：通过innerText 或者 innerHTML 将名字写入元素内部
css：

span {
      display: block;
      width: 100px;
      margin-top: 100px;
      padding: 10px 20px;
      border: solid #f00 1px;
      text-align: center;
    }

HTML：

<button>随机抽取</button>
  <span>这是渲染位置</span>
  <script>
    let names = ['1', '2', '3', '4', '5', '6']
    // 获取按钮
    let btn = document.querySelector('button')
    let span = document.querySelector('span')
    btn.addEventListener('click', function () {
      // 1.生成一个随机数
      let index = parseInt(Math.random() * names.length)
      // 2.获取随机数所对应的姓名
      let name = names[index]
      // 3.将姓名渲染到span内部
      // 如果没有标签，可以任意使用--innerText
      // 如果有标签，就使用innerHTML
      span.innerText = name
    })
  </script>