01卡片化标签页

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  var tabs = document.querySelectorAll('.tabs>div')
  var content = document.querySelectorAll('#content>div')
  for(let i=0;i<tabs.length;i++){
    tabs[i].onclick=function(){
      for(let j=0;j<content.length;j++){
        content[j].classList.remove("active")
        tabs[j].classList.remove("active")

      }
      content[i].classList.add("active")
      tabs[i].classList.add("active")
      
    }
  }
}
init();

02随机数生成器

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function (min, max, countNum) {
  var arr = [];
  // 在此处补全代码
  for(let i=0;i<countNum;i++){
    let num=Math.floor((Math.random()*(max-min+1))+min)
    if(arr.indexOf(num)===-1){
      arr.push(num)
    }else{i--}
  }
  return arr;
};
module.exports = getRandomNum; //请勿删除

03个人博客

/* TODO:banner 上的文字 需要居中显示 */
.banner .hero {
  text-align: center;
}
.home-wrapper .banner .banner-conent .hero {
  margin-top: 3rem;
}

/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */
.main-wrapper {
  display: flex;
}
.main-wrapper {
  margin: 1.5rem auto 0 auto;
  max-width: 1100px;
  padding: 0 0.9rem;
  box-sizing: border-box;
  position: relative;
}

/*/* TODO 宽度自适应 居左显示 */
.main-wrapper .main-left {
  width: fit-content;
}

/* 宽 245px 居右显示 */
.main-wrapper .main-right > * {
  box-sizing: border-box;
  width: 245px;
}

04学生成绩统计

<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "学生成绩统计",
        },
        tooltip: {},
        legend: {
          data: ["成绩"],
        },
        // TODO:待补充修改代码，定义x轴数据,并让数据正确显示
        xAxis:{
          data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],

        },
        // y轴
        yAxis: {
          // data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],
        },
        series: [
          {
            name: "成绩",
            type: "bar",
            data: [55, 90, 65, 70, 80, 63],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

05水果摆盘

/* 菠萝 TODO 待补充代码 */
.yellow {
  align-self: flex-end;
  order: 1;
}

06给页面化个妆

/*TODO：请补充代码*/
.content {
  width: 450px;
  height: 600px;
  background-color: rgba(0, 0, 0, .45);
  border-radius: 10px;
  margin: auto;
  margin-top: 55px;
}
.content img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: translateX(125px) translateY(-75px);
  /* transform: translateY(-100px); */

}
.form h2 {
  font-size: 45px;
  font-weight: 800;
  text-align: center;
  padding-bottom: 20px;
}
.form button {
  width: 80px;
  height: 30px;
  font-size: 16px;
  color: white;
  border-color:  #041c32;
  background-color: #2d4263;
  transform: translateX(140px);
  margin-right: 10px;
}
.form input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  text-align: center;
  margin-left: 50%;
  transform: translateX(-150px);
  margin-bottom: 20px;
}
.text a{
  font-size: 16px;
  color: white;
  text-decoration: none;
}
.text {
  margin-top: 20px;
  transform: translateX(180px);
}

07小兔子爬楼梯

const climbStairs = (n) => {
  // TODO：请补充代码
  if(n===0){
    return 0;
  }else if(n===1){
    return 1;
  }else if(n===2){
    return 2;
  }else{
    return climbStairs(n-2)+climbStairs(n-1);
  }
};
module.exports = climbStairs;

08时间管理大师

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>任务管理器</title>

    <link type="text/css" href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="box">
      <div class="head">
        <h2>Todos</h2>
        <p>罗列日常计划，做一个时间管理大师！</p>
        <div class="input">
          <span>内容</span>
          <input type="text" id="input" placeholder="请输入你要做的事" />
          <span id="add"  @click="add">确认</span>
        </div>
      </div>

      <ul class="list">
        <li v-show="list.length===0">暂无数据</li>
        <li v-for="(i, index) in list" :key="i">
          <!-- 前面的序号 -->
          <span class="xh">{{index+1}}</span>
          <!-- 列表内容 -->
          <span>{{i}}</span>
          <!-- 删除按钮 -->
          <span class="qc" @click="remove(index)"></span>
        </li>
        
        <li>
          <b> 总数：{{list.length}} </b>
          <b id="clear" @click="removeall">清除</b>
        </li>
      </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
      var top = new Vue({
        el: "#box",
        // 在此处补全代码，实现所需功能
        data() {
          return {
            list: []
          }
        },
        methods: {
          // 确认按钮
          add() {
            const id= document.getElementById('input').value;
            let flag=true;
            for(let i=0;i<this.list.length;i++) {
              if(id === '' ||this.list[i] === id){
                flag=false;
              }
            };
            if(flag) {
              this.list.push(id);
            }
          },
          // 删除按钮
          remove(index) {
            this.list.splice(index,1)
          },
          // 全部删除按钮
          removeall() {
            this.list=[]
          }
        },
      });
    </script>
  </body>
</html>

09购物车


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

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<style>
		h4 {
			text-align: center;
		}

		.box-card {
			width: 200px;
			overflow: hidden;
			margin: 0 auto;
		}

		.box-card img {
			width: 100%;
			height: auto;

		}

		.bottom {
			margin: 8px 0;
		}
	</style>
</head>

<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!--TODO 购物车列表 -->
		<div v-for="item in carlist" key="item.id">
			<div class="box-card">
				<!-- 商品图片 img -->
				<img :src="item.img">
				<div>
					<span>
						<!-- 商品名称 name -->
						{{item.name}}
					</span>
					<div class="bottom clearfix">
						<button type="text" class="button" @click="item.num++">+</button>
						<button type="text" class="button">
							<!-- 商品数量 num -->
							{{item.num}}
						</button>
						<button type="text" class="button" @click="item.num--">-</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			async created() {
				//TODO 使用axios  请求购物车列表
				let res = await axios.get('./carList.json')
				this.carlist = res.data
			},
		})


	</script>
</body>




</html>