Javascript

座位选择（JS）

本文主要是介绍座位选择（JS），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      width: 500px;
      height: 400px;
      border: 1px solid red;
      position: fixed;
      margin: 0 auto;
      left: 0;
      right: 0;
      top: 50%;
      transform: translate(0,-50%);
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      }
    ul>li{
      list-style: none;
      width: 70px;
      height: 40px;

      font-size: 10px;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      color: #333;
      background: #a19292;
      border: 1px solid white;
      display: inline-block;
      align-content: center;
    }
    div{
      width: 150px;
      height: 100px;
      border-left: 1px solid #a19292;
      border-right: 1px solid #a19292;
      box-shadow: #a19292;
      line-height: 100px;
    }
    .click{
      background-color: orange;
      color: white;
    }
  </style>
</head>
<body>
<ul>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <div>屏幕中央</div>
</ul>
<script>
  var lis = document.getElementsByTagName('li');
  for(var i = 0;i<lis.length;i++){
    lis[i].onclick = function () {
      let res = this.getAttribute('class');
      if(!res){
        let res = this.setAttribute('class','click')
        this.innerHTML = '座位已被选'
      }else{
        let res = this.setAttribute('class','')
        this.innerHTML = ''
      }
    }
  }
</script>
</body>
</html>

 

 

这篇关于座位选择（JS）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航