hw5vhw5hw5hw5

我是秃头兔
已于 2023-04-28 17:19:27 修改
阅读量69
点赞数 1
文章标签： css html javascript
于 2023-04-26 09:57:01 首次发布
本文链接：https://blog.csdn.net/y1304908038/article/details/130379720
版权
<!DOCTYPE html>
<html>
  <head>
    <title>HW 5 問卷設計</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <style>
      #content{
        width: 1000px;
        height: 100vh;
        margin: 0 auto;
      }
      .none{
        display: none !important;
      }
      .block{
        display: block !important;
      }
      .head,.question{
        border-bottom: 1px black solid;
      }
      .head div{
        width: 98%;
        height: 44px;
        margin: 9px;
        position: relative;
      }


      .question-content{
        width: 960px;
        margin: 9px;
        font-size: 15px;
        padding:0 10px;
      }
      .question-content div{
        line-height: 42px;
      }
      .question-content div span{
        width: 90px;
        height: 40px;
        font-weight: 700;
        display: inline-block;
      }
      .question-titiles{
        display: flex;
      }
      .question-content div input[type="text"],textarea{
        width: 720px;
        height: 22px;
        margin-left: 4px;
      }
      .question-content textarea{
        display: none;
        height: 62px;
        /*顶部对齐*/
        vertical-align: top;
      }
      select{
        width: 200px;
        height: 28px;
        display: inline-block;
      }
      .question-need div{
        display: inline-block;
      }
      .question-add {
        float: right;
        line-height: 1;
        width: 95px;
        height: 39px;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        background-color: #409eff;
        border-color: #409eff;
        border: 1px solid #dcdfe6;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
      }
      .fillin-content{
        width: 980px;
        margin: 9px;
        font-size: 15px;
        background-color: #eeeeee;
      }
      .submit{
        display: inline-block;
        margin-right: 20px;
        float: right;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background-color: #409eff;
        border-color: #409eff;
        border: 1px solid #dcdfe6;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
      }
      #question-size{
        display: none;
      }
      #question-size input[type=number]{
        margin-left:94px;
        width: 200px;
        height: 28px;
        display: inline-block;
      }
      /*单选*/
      #question-radio div{
        display: inline-block;
        vertical-align: top;
      }
      #question-radio div input[type=text]{
        width: 694px;
      }
      .radio-add .radio-add-span{
        width: 700px;
        line-height: 28px;
        height: 28px;
        font-size: 14px;
        font-weight: 100;
        background-color: white;
        margin-left: 4px !important;
        border: 1px black solid;
        color: #757575;
      }
      /*多选*/
      #question-checkbox,  #question-radio{
        display: none;
      }
      #question-checkbox div{
        display: inline-block;
        vertical-align: top;
      }
      #question-checkbox div input[type=text]{
        width: 694px;
      }
      .checkbox-add .checkbox-add-span{
        width: 700px;
        line-height: 28px;
        height: 28px;
        font-size: 14px;
        font-weight: 100;
        background-color: white;
        margin-left: 4px !important;
        border: 1px black solid;
        color: #757575;
      }
      .group {
        position: relative;
        width: 980px;
        height: auto;
        box-sizing: border-box;
        margin-bottom: 2px;
        background-color: white;
        padding: 5px;
        border-radius: 2px;
      }
      .group:hover{
        box-shadow: 0 0 10px rgba(140, 140, 140, 0.7);
      }
      .group:hover .group-hidden{
        visibility: visible;
      }
      .group-hidden{
        position: absolute;
        top: 0px;
        right:5px;
        visibility: hidden;
      }
      .group .group-fuhao{
        color: red;
        margin-left: 5px;
      }
      .group input{
        height: 26px;
      }
      .group input[type=text],input[type=password]{
        width: 826px;
        margin-left: 29px;
      }
      .group input[type=text],input[type=number]{
        margin-left: 29px;
      }
      .group-radioddiv  input[type=radio] {
        margin-left: 29px;
      }
      .group-checkboxddiv  input[type=checkbox] {
        margin-left: 29px;
      }
      .group textarea{
        width: 826px;
        height: 60px;
        margin-left: 29px;
      }
      #group-commit input{
        width: 103px;
        height: 26px;
        font-size: 15px;
        float: right;
        line-height: 26px;
        margin-right: 21px;
        border-radius: 1px;
        border: 1px black solid;
        background-color: #f6f6f6;
      }
      .fillin-content div:first-child .moveup{
        display: none !important;
      }
      .fillin-content div:last-child .down{
        display: none !important;
      }

    </style>
  </head>  
  <body>
    <!--作業程式碼 開始-->  
    <div id="content"> 
      <div class="head">
        <h2>問卷管理-問卷設計</h2>
      </div>     
      <div class="question">
        <div class="question-content"> 
          <div class="question-lei">
            <span>問題類型 </span>
            <select class="question-select">
              <option value="text">文字框(Text)</option>
              <option value="password">密碼框(Password)</option>
              <option value="number">數字框(Number)</option>
              <option value="textarea">文字方塊(Textarea)</option>
              <option value="radio">單選題(Radio)</option>
              <option value="checkbox">多選題(Checkbox)</option> 
            </select> 
          </div> 
          <div class="question-titiles" >
            <span>題目</span>
            <input type="text" class="question-titile"  placeholder="请输入题目名称">
            <textarea id="question-textarea" name="question-textarea" placeholder="请输入题目名称"></textarea>
          </div> 
          <div id="question-size">
            <span>最大值</span> 
            <input type="checkbox" class="size-max"  value="size-max"><label for="size-max">设定为最大值</label><br/>
            <input type="number" class="num-max"   placeholder="最大数字"><br/>
            <span>最小值</span> 
            <input type="checkbox" class="size-min"  value="size-min"><label for="size-min">设定为最小值</label><br/>
            <input type="number"  placeholder="最小数字" class="num-min">
          </div>
          <div id="question-radio"> 
            <span>选项</span>
            <div>
              <input type="radio"><input type="text" class="radio-name" placeholder="请输入选项名称"><br/> 
              <div class="radio-add"><input type="radio" ><span class="radio-add-span"> 点击新增选项</span>  </div> 
            </div> 
          </div>
          <div id="question-checkbox">
            <span>选项</span>
            <div>
              <input type="checkbox"><input type="text" class="checkbox-name"  placeholder="请输入选项名称"><br/> 
              <div class="checkbox-add"><input type="checkbox"><span class="checkbox-add-span" >点击新增选项</span></div> 
            </div> 
          </div>
          <div class="question-need"> 
            <div class="">
              <input type="checkbox" id="ting"  value="ting"><label for="ting">此題目為必填</label>
            </div> 
            <div class="question-add">
              新增問題
            </div>
          </div>
        </div>   
      </div> 
      <form name="formname">
        <div class="fillin-content"></div>   
        <input  class="submit none" type="submit" value="完成問卷">   
      </form> 
    </div>   
    <script >
    const select = document.querySelector('.question-select');
const options = document.querySelectorAll('option');
const questionSize = document.querySelector('#question-size');
const questionTitile = document.querySelector('.question-titile');
const questionTextarea = document.querySelector('#question-textarea');
const questionRadio = document.querySelector('#question-radio');
const radioAdd = document.querySelector('.radio-add');
const questionCheckbox = document.querySelector('#question-checkbox');
const checkboxAdd = document.querySelector('.checkbox-add');
const sizeMax = document.querySelector('.size-max');
const numeMax = document.querySelector('.num-max');
const sizeMin = document.querySelector('.size-min');
const numeMin = document.querySelector('.num-min');
const fillinContent = document.querySelector('.fillin-content');
const questionAdd = document.querySelector('.question-add');
//下拉框切换
select.onchange = function () {
  questionSize.setAttribute('class', 'none');
  questionRadio.setAttribute('class', 'none');
  questionCheckbox.setAttribute('class', 'none');
  questionTextarea.setAttribute('class', 'none');
  questionTitile.classList.remove('none');
  if (select.value === 'number') {
    questionSize.setAttribute('class', 'block');
  } else if (select.value === 'textarea') {
    questionTitile.classList.add('none');
    questionTextarea.setAttribute('class', 'block');
  } else if (select.value === 'radio') {
    questionRadio.setAttribute('class', 'block');
  } else if (select.value === 'checkbox') {
    questionCheckbox.setAttribute('class', 'block');
  }
}
//单选新增
radioAdd.onclick = function () {
  var divRadio = document.createElement("div");
  var inputRadio = document.createElement("input");
  inputRadio.type = 'radio';
  var inputText = document.createElement("input");
  inputText.className = 'radio-name';
  inputText.type = 'text';
  inputText.placeholder = "请输入选项名称";
  var inputbr = document.createElement("br");
  radioAdd.parentNode.insertBefore(inputRadio, radioAdd);
  radioAdd.parentNode.insertBefore(inputText, radioAdd);
  radioAdd.parentNode.insertBefore(inputbr, radioAdd);
}
//多选新增
checkboxAdd.onclick = function () {
  var inputCheckbox = document.createElement("input");
  inputCheckbox.type = 'checkbox';
  var inputTextCheckbox = document.createElement("input");
  inputTextCheckbox.className = 'checkbox-name';
  inputTextCheckbox.type = "text";
  console.log(checkboxAdd.parentNode)
  inputTextCheckbox.placeholder = "请输入选项名称";
  var inputbrCheckbox = document.createElement("br");
  checkboxAdd.parentNode.insertBefore(inputCheckbox, checkboxAdd);
  checkboxAdd.parentNode.insertBefore(inputTextCheckbox, checkboxAdd);
  checkboxAdd.parentNode.insertBefore(inputbrCheckbox, checkboxAdd);
}
//上移 下移 删除创建
function createHiddenSpan (text, className, callback) {
    const span = document.createElement('span');
    span.className = 'hidden ' + className;
    span.innerText = text;
    span.addEventListener('click', callback);
    return span;
}
//判断题目名称是否填写
function getText () {
  if ((select.value === 'number' || select.value === 'password' || select.value === 'text') && questionTitile.value === '') {
    alert('请输入题目名称');
    return false;
  } else if (select.value === 'textarea' && questionTextarea.value === '') {
    alert('请输入题目名称');
    return;
  } else if (select.value === 'textarea' && questionTextarea.value === '') {
    alert('请输入题目名称');
    return;
  } else if (select.value === 'radio' && questionTitile.value === '') {
    alert('请输入题目/选项名称');
    return;
  } else {
    return true;
  }
}
//新增问题点击事件
questionAdd.onclick = function () {
  if (getText() === true) {
    //创建新增的div标签  
    var newdiv = document.createElement('div');
    newdiv.className = 'group';
    const titileSpan = document.createElement('span');
    titileSpan.innerText = '*';
    titileSpan.className = 'group-fuhao';
    var titileText = document.querySelector('.question-titile').value;
    const newBr = document.createElement('br');
    const hiddenDiv = document.createElement('div');
    hiddenDiv.className = 'group-hidden';
    //上移功能 
    hiddenDiv.append(createHiddenSpan('▴上移', 'moveup', function () {
      var groups = this.parentNode.parentNode;
      if (groups.previousSibling) {
        fillinContent.insertBefore(groups, groups.previousSibling);
      }
    }));
    //下移功能
    hiddenDiv.append(createHiddenSpan('▾下移', 'down', function () {
      var groups = this.parentNode.parentNode;
      fillinContent.insertBefore(groups, groups.nextSibling.nextSibling);
    }));
    //每个携带一个删除功能 
    hiddenDiv.append(createHiddenSpan('x删除', 'delete', function () {
      var groups = this.parentNode.parentNode;
      groups.remove();
    }));
    newdiv.append(titileText);
    var xuanhzong = document.getElementById('ting');
    var inputContrnt = document.createElement("input");
    inputContrnt.type = select.value;
    //选中添加一个参数
    if (xuanhzong.checked === true) {
      newdiv.append(titileSpan);
      inputContrnt.required = true;
    }
    newdiv.append(newBr);
    newdiv.append(hiddenDiv);
    //根据不同的select类型显示不同的内容
    if (select.value === 'number') {
      if (sizeMax.checked === true) {
        inputContrnt.max = numeMax.value;
      }
      if (sizeMin.checked === true) {
        inputContrnt.min = numeMin.value;
      }
      newdiv.append(inputContrnt);
      fillinContent.append(newdiv);
    } else if (select.value === 'textarea') {
      var textareaContrnt = document.createElement("textarea");
      titileText = questionTextarea.value;
      newdiv.append(titileText);
      if (xuanhzong.checked === true) {
        newdiv.append(titileSpan);
        textareaContrnt.required = true;
      }
      newdiv.append(newBr);
      newdiv.append(textareaContrnt);
      fillinContent.append(newdiv);
    } else if (select.value === 'radio') {
      const radioName = document.querySelectorAll('.radio-name');
      const radioddiv = document.createElement('div');
      radioddiv.className = 'group-radioddiv';
      var questionTitileName = questionTitile.name;
      radioName.forEach((item, index) => {
        questionTitileName = questionTitileName + index;
        const radiodlabel = document.createElement('label');
        radiodlabel.append(item.value);
        var inputCentt = document.createElement("input");
        inputCentt.type = 'radio';
        inputCentt.id = questionTitileName + 'radio' + index;
        inputCentt.name = questionTitile.value;
        radiodlabel.htmlFor = inputCentt.id;
        if (xuanhzong.checked === true) {
          inputCentt.required = true;
        }
        radioddiv.append(inputCentt);
        radioddiv.append(radiodlabel);
        questionTitile.name = questionTitile.name + index;
      })
      newdiv.append(radioddiv);
      fillinContent.append(newdiv);
    } else if (select.value === 'checkbox') {
      var checkboxName = document.querySelectorAll('.checkbox-name');
      const checkboxddiv = document.createElement('div');
      checkboxddiv.className = 'group-checkboxddiv';
      var questionTitileName = questionTitile.name;
      checkboxName.forEach((item, index) => {
        const checkboxdlabel = document.createElement('label');
        checkboxdlabel.append(item.value);
        var inputCentt = document.createElement("input");
        inputCentt.type = 'checkbox';
        inputCentt.id = questionTitileName + index;
        checkboxdlabel.htmlFor = inputCentt.id;
        checkboxddiv.append(inputCentt);
        checkboxddiv.append(checkboxdlabel);
        questionTitile.name = questionTitile.name + index;
      })
      newdiv.append(checkboxddiv);
      fillinContent.append(newdiv);
    } else {
      newdiv.append(inputContrnt);
      fillinContent.append(newdiv);
    }
  }
  const submits = document.querySelector('.submit');
  const groups = document.querySelectorAll('.group');
  if (groups.length > 0) {
    submits.classList.add('block');
  }
}
 
    </script>
    <!--作業程式碼 結束-->
  </body>
</html>