1.todolist

  1. <input type="text" id="input">
  2. <ul id="app">
  3. </ul>
  4. <script>
  5. var arr = []
  6. var input = document.getElementById("input")
  7. var app = document.getElementById("app")
  8. input.onkeydown = function(event){
  9. if(event.keyCode == 13){
  10. if(arr.indexOf(this.value) == -1 && this.value!=""){
  11. arr.push(this.value)
  12. var li = document.createElement("li")
  13. li.innerHTML = this.value
  14. app.append(li)
  15. }
  16. console.log(arr);
  17. }
  18. }
  19. </script>

2.tab切换

  1. <ul>
  2. <li class="current">html</li>
  3. <li>css</li>
  4. </ul>
  5. <div class="parent">
  6. <div class="html">html</div>
  7. <div class="css">css</div>
  8. </div>
  9. <script>
  10. var lis = document.getElementsByTagName("li")
  11. var divs = document.querySelectorAll(".parent div")
  12. for(let i=0;i<lis.length;i++){
  13. lis[i].index = i;
  14. lis[i].onclick = function(){
  15. for(let i=0;i<lis.length;i++){
  16. lis[i].classList.remove("current")
  17. }
  18. this.classList.add("current")
  19. for(let i=0;i<divs.length;i++){
  20. divs[i].style.display = "none"
  21. }
  22. divs[this.index].style.display = "block"
  23. }
  24. }
  25. </script>

3.取最大值 && 求和

var arr = [10,22,14,4];

取最大值 (写两种方法)

  1. var arr = [10,22,14,4]
  2. / 取最大值 /
  3. //1.算法实现
  4. var maxNum = arr[0]
  5. for(var i=1;i<arr.length;i++){
  6. if(maxNum<arr[i]){
  7. maxNum = arr[i]
  8. }
  9. }
  10. console.log(maxNum);
  11. // 2.数组方法实现
  12. console.log(Math.max(...arr));

求和(写两种方法)

  1. / 求和 /
  2. var sum =0;
  3. for(var i=0;i<arr.length;i++){
  4. sum+=arr[i]
  5. }
  6. console.log(sum);
  7. var s = arr.reduce((a,b)=>{
  8. return a+b
  9. })
  10. console.log(s);

4.根据count值升序

  1. var obj = [
  2. {name:"cheng",count:30},
  3. {name:"li",count:12},
  4. {name:"zhang",count:14}
  5. ];
  6. var res=obj.sort((a,b)=>{
  7. return a["count"]-b["count"]
  8. })
  9. console.log(res)

5.数据处理

  1. var obj =[
  2. {
  3. "isSelected": true,
  4. "name": "纸上行舟",
  5. "count": 3,
  6. "id": "0001"
  7. },
  8. {
  9. "isSelected": true,
  10. "name": "我可能得抑郁症了!舟",
  11. "count": 2,
  12. "id": "0002"
  13. },
  14. {
  15. "isSelected": true,
  16. "name": "绕日飞行",
  17. "count" : 4,
  18. "id": "0003"
  19. }
  20. ]
  21. var res = []
  22. for(var i=0;i<obj.length;i++){
  23. var {id,name} = obj[i]
  24. res.push({
  25. id,
  26. name
  27. })
  28. }
  29. console.log(res);

6.输入框,获取对应的数据

  1. <script>
  2. var arr = [
  3. {name:"你是谁,他在那里",id:1102},
  4. {name:"圈住你在那里",id:1102},
  5. {name:"hello在那里",id:1102},
  6. {name:"怪你哈哈",id:1102},
  7. {name:"world",id:1102},
  8. ]
  9. /* 1.enter回车获取关键字
  10. 2.使用关键字,对数据查询,得到一个新的数组
  11. 3.name的字符超过3位以...结尾
  12. */
  13. var txt = document.getElementById("txt")
  14. txt.onkeydown = function(event){
  15. if(event.keyCode == 13){
  16. var value = this.value
  17. if(value){
  18. var res = arr.filter(item=>{
  19. return item["name"].includes(value)
  20. })
  21. res.map(item=>{
  22. if(item.name.length>3){
  23. return item.name = item.name.slice(0,3)+"..."
  24. }
  25. })
  26. console.log(res);
  27. }
  28. }
  29. }