javascript学习小案例

最新推荐文章于 2024-08-04 16:33:59 发布

十项全能王稳健

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量280

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/qq_38927286/article/details/119980103

版权

判断一个字符串中出现最多的字符以及其出现的次数

单选全选案例

tab栏选项卡切换

打印九九乘法表

//方法一：控制台直接打印

let str = '';

  for (let i = 1; i <= 9; i++) {

    for (let j = 1; j <= i; j++) {

      str += j + 'x' + i + '=' + i * j + '\t';

    }

  str += '\n';

  }

console.log(str);

//方法二：使用表格呈现

let bg = '<table>';

  for (let i = 1; i <= 9; i++) {

    bg += '<tr>';

    for (let j = 1; j <= i; j++) {

      bg += '<td>' + j + '*' + i + '=' + i * j + '</td>';

    }

   bg += '</td>';

  }

bg += '</table>';

document.write(bg);

随机数游戏

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
let random = getRandom(1, 50);
for (let i = 1; i <= 10; i++) {
    let num = prompt('请输入一个1-50之间的数');
    if (num > random) {
        alert('你猜大了');
    } else if (num < random) {
        alert('你猜小了');
    } else if (num == random) {
        alert('恭喜，你猜对了');
        break;
    }
    if (i == 10) {
        alert('很遗憾，您的次数已用完');
    }
}

格式化日期

//日期格式化
let date = new Date();
let year = date.getFullYear(); //获取当前年份
let month = date.getMonth(); //获取当前月份(0-11),返回的月份小1月，需要+1。
let dates = date.getDate(); //获取当天日期
let day = date.getDay(); //获取星期几(0-6代表周日到周六)
let hours = date.getHours(); //获取当前小时
let minutes = date.getMinutes(); //获取当前分钟数
let secondes = date.getSeconds(); //获取秒数
//打印今天是哪年哪月哪天星期几
let arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log('今天是' + year + '年' + (month + 1) + '月' + dates + '日' + arr[day]);
      
//封装一个函数，返回当前的时分秒，格式08:08:08
function getTime() {
    let time = new Date();
    let h = time.getHours();
    h = h < 10 ? '0' + h : h;//判断h是否小于10，小于就在前面舔0
    let m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    let s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;//return返回结果
}
console.log(getTime());

//返回总的毫秒数(时间戳)方法
//方法1：
date.valueOf()、date.getTime()
//方法2：
let date1 = +new Date();
console.log(date1)
//方法3：H5新增：Date.now()
console.log(Date.now())

//倒计时案例，案例分析：预计的时间-现在的时间=剩余的时间总毫秒数，即倒计时，通过时间戳计算。
//时间戳转化为天、时、分、秒公式：
//d = parseInt(总秒数 / 60 / 60 / 24); //计算天数
//h = parseInt((总秒数 / 60 / 60) % 24); //计算小时
//m = parseInt((总秒数 / 60) % 60); //计算分钟数
//s = parseInt(总秒数 % 60); //计算秒数
function countDown(time) {
    let nowTime = +new Date(); //返回当前时间戳
    let inputTime = +new Date(time); //返回输入时间戳
    let times = (inputTime - nowTime) / 1000; //返回剩余总秒数
    let d = parseInt(times / 60 / 60 / 24);
    d = d < 10 ? '0' + d : d;
    let h = parseInt((times / 60 / 60) % 24);
    h = h < 10 ? '0' + h : h;
    let m = parseInt((times / 60) % 60);
    m = m < 10 ? '0' + m : m;
    let s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s;
    return '高考倒计时还有：' + d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-6-8 09:00:00'));//调用时用字符串格式

查找字符串中字符出现的位置和次数

let str = 'oabcoefoxyozzopp'
let i = str.indexOf('o')
let num = 0
    while (i !== -1) {
        console.log(i)//位置
        num++
        i = str.indexOf('o', i + 1)//在原来位置上往后查找
    }
console.log(num)//次数

判断一个字符串中出现最多的字符以及其出现的次数

//思路：
//1.遍历这个字符
//2.把每个字符都存储给对象，如果对象没有该属性，就为1，存在了就+1
//3.遍历对象，得到最大值和该字符
//提示：JS 调用属性一般有两种方法：.和中括号[]的方法
-------------------------------------------------------------------------
//二者区别：
//1.点方法后面跟的必须是一个指定的属性名称，而中括号方法里面可以是变量
//2.中括号方法里面的属性名可以是数字，而点方法后面的属性名不可以是数字
//3.当动态为对象添加属性时，必须使用中括号[]，不可用点方法

let str = 'oabcoefoxyozzopp'
    let num = 0
    let obj = {}
    //1.遍历字符串
    for (let i = 0; i < str.length; i++) {
      let chars = str[i] //chars存的是字符串里的每一个字符
      if (obj[chars]) {
        //obj得到属性值
        obj[chars]++
      } else {
        obj[chars] = 1
      }
    }
    console.log(obj)
    //2.遍历对象
    let theMax = 0 //保存出现最多的字符出现的次数
    let key = '' //保存出现次数最多的字符
    for (let k in obj) {
      if (obj[k] > theMax) {
        theMax = obj[k]
        key = k
      }
    }
    console.log('出现最多的字符：', key)//出现最多的字符：o
    console.log('出现的次数：', theMax)//出现的次数：5

单选全选案例

/*
1.全选和取消全选做法：让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有的复选框绑定点击事件，每次点击，都要
循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中
3.可以设置一个变量，来控制全选是否选中
*/
    /*
    <div>
      <table>
        <thead id="t_head">
          <tr>
            <th>
              <input type="checkbox" id="ipt_all" />
            </th>
            <th>bbb</th>
            <th>ccc</th>
          </tr>
        </thead>
        <tbody id="t_body">
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>222</td>
            <td>333</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>555</td>
            <td>666</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>888</td>
            <td>999</td>
          </tr>
        </tbody>
      </table>
    </div>
    */
    <script>
      //全选按钮部分
      let ipt1 = document.getElementById('ipt_all')
      let ipt2 = document.getElementById('t_body').getElementsByTagName('input')
      ipt1.onclick = function () {
        console.log(this.checked)
        for (let i = 0; i < ipt2.length; i++) {
          ipt2[i].checked = this.checked
        }
      }
      //方法一：设置flag变量
      //复选框部分：全部选中，全选按钮才选中
      for (let i = 0; i < ipt2.length; i++) {
        ipt2[i].onclick = function () {
          let flag = true //flag控制全选按钮是否选中
          for (let i = 0; i < ipt2.length; i++) {
            if (!ipt2[i].checked) {
              flag = false
              break;//break退出for循环，这样可以提高执行效率，因为只要有一个没选中，剩下的就无需循环判断了
            }
          }
          ipt1.checked = flag
        }
      }
      /*方法二：不设置flag变量：
      for (let i = 0; i < ipt2.length; i++) {
        ipt2[i].onclick = function () {
          for (let i = 0; i < ipt2.length; i++) {
            if (ipt2[i].checked) {
              ipt1.checked = ipt2[i].checked
            } else {
              ipt1.checked = ''
            }
          }
        }
      }
      */
    </script>

tab栏选项卡切换

<style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      .tab {
        margin: 100px auto;
        width: 1000px;
      }
      .nav {
        width: 100%;
        height: 40px;
        background-color: #ccc;
      }
      ul li {
        float: left;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #ccc;
        cursor: pointer;
      }
      .current {
        background-color: red;
        color: white;
      }
</style>
<body>
    <div class="tab">
      <div class="nav">
        <ul>
          <li class="current">商品介绍</li>
          <li>规格包装</li>
          <li>售后保障</li>
          <li>商品评价</li>
          <li>手机社区</li>
        </ul>
      </div>
      <div class="content">
        <div class="item">商品介绍模块内容</div>
        <div class="item" style="display: none">规格包装模块内容</div>
        <div class="item" style="display: none">售后保障模块内容</div>
        <div class="item" style="display: none">商品评价模块内容</div>
        <div class="item" style="display: none">手机社区模块内容</div>
      </div>
    </div>
    <script>
      let nav = document.querySelector('.nav')
      let lis = nav.getElementsByTagName('li')
      let con_item = document.querySelectorAll('.item')
      console.log(con_item)
      for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          //清楚所有li的类名
          for (let i = 0; i < lis.length; i++) {
            lis[i].className = ''
          }
          //当前项li添加current类
          this.className = 'current'
          //将所有的内容设为隐藏
          for (let i = 0; i < con_item.length; i++) {
            con_item[i].style.display = 'none'
          }
          //第i项的内容设为可见
          con_item[i].style.display = 'block'
        }
      }
    </script>
</body>

十项全能王稳健

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习小案例

//方法一：控制台直接打印letstr='';for(leti=1;i<=9;i++){for(letj=1;j<=i;j++){str+=j+'x'+i+'='+i*j+'\t';}str+='\n';}console.log(str);//方法二：使用表格呈现letbg='<table>';fo...
复制链接

扫一扫