题目1

小明的女朋友最喜欢在网上买买买了，可是钱包里钞票有限，不能想买啥就买啥。
面对琳琅满目的物品，她想买尽可能多的种类，每种只买一件，同时总价格还不能超过预算上限。
于是她请小明写程序帮她找出应该买哪些物品，并算出这些物品的总价格。

输入规范：
包含两个输入框，一个计算按钮。
第一个是预算上限。(从输入框填写)
第二个是用空格分隔的一组数字，代表每种物品的价格。(从输入框填写)
所有数字都为正整数并且不会超过10000。

输出规范：
对每个输入，点击计算按钮后输出应买物品的总价格。

输入示例1:
100
50 50
输出示例1:
100

输入示例2:
188
50 42 9 15 105 63 14 30
输出示例2:
160

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="t1" onBlur="Capsblur()" value="0">
  <br>
  <input type="text" id="t2" onBlur="CapsAttr()" value="0">
  <span id="caps">0</span>
  <span id="newsarr">0</span>
  <span id="total">0</span>
</body>
<script>
  var caps = document.getElementById("t1")
  var rads = document.getElementById("t2")
  var attr = [], s1 = "预算上限为正整数", s2 = "每种物品的价格为正整数,用空格符隔开";
  const Capsblur = ()=> {
   //上限
    caps = document.getElementById("t1")
    if (!PositiveInteger(caps.value)) {
   
      alert(s1);
      return false
    }
    CapsAttr();
  }
  const CapsAttr = () => {
   //每种物品的价格
    var total = 0, newsarr = []
    rads = document.getElementById("t2")
    rads = rads.value.replace(/(^\s*)/g, "")
    attr = rads.split(" ")
    for (var i = 0; i < attr.length; i++) {
   
      if (!PositiveInteger(attr[i] * 1)) {
   
        alert(s2);
        return false
      } else {
   
        if (attr[i] * 1 < 10000) {
   
          total += attr[i] * 1
          if (total < caps.value * 1) {
   
            newsarr.push(attr[i])
            if (i == attr.length - 1) {
   
              html(caps.value, newsarr.join(" "), total)
            }
          } else {
   
            total = total - attr[i] * 1
            html(caps.value, newsarr.join(" "), total)
            return false;
          }
        }
      }
    }
  }
  const html = (t, t1, t2)  => {
   //显示结果
    document.getElementById("caps").innerText = t
    document.getElementById("newsarr").innerText = t1
    document.getElementById("total").innerText = t2
  }
  const PositiveInteger = str => {
   
    var re = /^[0-9]+$/
    return re.test(str)
  };
</script>

</html>

题目2

  1. 构建一个n*n的格子(n从输入框填写) ,默认背景色都是白色,鼠标指针指上去的格子底色要变
    成红色,鼠标移出时复原
  2. 鼠标点击格子时背景色固定为蓝色,指针hover时也不变红。再次点击时复原成未点击的状态
  3. 格子大小可用css控制,底色变化用js实现 
<input id="in" type="text" placeholder="输入n">
<button onclick="createTable()">确认n</button>


<style>
td{
   
    width:20px;
    height:20px;
    border:1px solid;        
}
</style>


<script>
// 创建n*n表格
  const createTable = () => {
   
    let n=document.getElementById("in").value

    //创建n*n的"table"
    let str="<tbody>"
    for(var i=0;i<n;i++){
   
        str+="<tr>"
        for(var j=0;j<n;j++){
   
            str+="<td></td>"
        }
        str+="</tr>"
    }
    str += "</tbody>"
    let table = document.createElement("table")
    table.innerHTML = str

    table.setAttribute("cellspacing", 0)
    document.body.appendChild(table)

    //调用事件函数
    colorEvent(table)   
}
</script>