前端学习大全（小练习）

努力的编程的小白1

已于 2022-04-06 23:50:18 修改

阅读量831

点赞数 2

分类专栏：前端文章标签： javascript

于 2022-04-05 21:09:43 首次发布

本文链接：https://blog.csdn.net/m0_58975873/article/details/123977267

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.javascript基础

1.1字符串常见使用

<!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>Document</title>
</head>
<body>
    
    <script>
       var str = '你好，前端小灰狼'
       //输出一次
       console.log(str)
       var res = str.charAt(3) // 按照索引获取字符串
       console.log(res)

       var str2 = 'HELLO LITLE GRA WOLF'
       console.log(str2)
       var res2 = str2.toLowerCase()
       console.log('转换成小写 ' + res2)

       var str3 = 'hello'
       console.log(str3)
       var res3 = str3.toUpperCase()
       console.log('转换成大写 '+res3) 

       var str4 = '你好，前端小灰狼'
       console.log(str4)
       var res4 = str.replace('前端','帅气')
       console.log('前面 替换成 后面 ：'+res4)

       var str5 = ' 去除空格  '
       console.log(str5)
       var res5 = str.trim()
       console.log(res5)

       var str6 = '2070-3-22'
       console.log(str6)
       var res6 = str.split('-')
       console.log('安 - 分割 '+res6)

       var str7= '你好， 前端小灰狼'
                // 0 1 2 3 4 5 6 7
       console.log(str7)
       var res8 = str.substr(1,6) //输出 ： 好，前端小灰  （索引从0开始 0到6 ）
       console.log(res8)

       var res9= str.substring(1,6)
       console.log(res9)  // 输出 ：好，前端小 （索引从0开始  不包含 6）

       var res10 = str.slice(1,6)
       console.log(re3)  //输出 ： 好，前端小 （索引从1开始）



    </script>

</body>
</html>

1.2 数字的常见方法

<!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>Document</title>
</head>
<body>
    <script> 
       /*  
           1. random()   0 -  1 之间的随机小数
           2. round(数字)    四舍五入 取整 
           3. ceil(数字)     向上取整
           4. floor(数字)    向下取整
           5. pow(底数，指数)      取幕
           6. sqrt(数字)     二次方梗
           7. abs(数字)      取绝对值
           8. max(数字1，数字2，数字3)      取最大值
           9. min(数字1，数字2，数字3)      取最小值
           10 PI             取近似 π 的值
       */


        var rsult1 = Math.random();
        console.log('取 0- 1 的随机小数 :  '+ rsult1)
         
        var rsult2 = Math.round(10.5);
        console.log('取 四舍五入 :  '+ rsult2 )

               
        var rsult3 = Math.ceil(10.5);
        console.log('取 向上取整 :  '+ rsult3 )

               
        var rsult4 = Math.floor(10.5);
        console.log('取 :向下取整 '+ rsult4 )

               
        var rsult5 = Math.pow(2,5);
        console.log('取 幕  : '+ rsult5 )

               
        var rsult6 = Math.sqrt(2);
        console.log('取 二次方梗 :  '+ rsult6 )

               
        var rsult7 = Math.abs(-2);
        console.log('取 绝对值 :  '+ rsult7 )

               
        var rsult8 = Math.max(10,15,2);
        console.log('取 最大值 :  '+ rsult8 )

               
        var rsult9 = Math.min(10,2,5);
        console.log('取 最小值 :  '+ rsult9 )

               
        var rsult10 = Math.PI;
        console.log('取 去近式π值  :  '+ rsult10 )


        //获取 0到 两位数 的值
        function randomNum(min,max){
            var result = Math.floor(Math.random() * (max - min + 1)) 
            var res12 = result + min 
            return res12

        } 

        var result = randomNum(10,30) //设置2个参数
        console.log(result)
        

    </script>


</body>
</html>

1.3 时间的常用方法

<!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>Document</title>
</head>
<body>

    <script>
     //一 ： 创建一个时间对象
     var time = new Date(2022,2,23,11,22,18)  // 2020 年 2月 23 日 11点 22分 18秒
     console.log('自己设置的时间： ' + time)

     //二 ： 获取时间的方法 （8个）
     var date = new Date()
     console.log(' 1.获取到时间对象的 年份 信息 '+ date.getFullYear)
     console.log(' 2.获取到时间对象的 月份 信息 '+ date.getMonth())
     console.log(' 3.获取到时间对象的 日期 信息 '+ date.getDate())
     console.log(' 4.获取到时间对象的 小时 信息 '+ date.getHours())
     console.log(' 5.获取到时间对象的 分钟 信息 '+ date.getMinutes())
     console.log(' 6.获取到时间对象的 秒钟 信息 '+ date.getSeconds())
     console.log(' 7.获取到时间对象的 星期 信息 '+ date.getDay())
     console.log(' 8.获取到时间对象的 时间戳 信息 '+ date.getTime())

     console.log('----三 ：设置时间方法（7个 没有星期，因为他会自动匹配）----')

     //
     console.log(' 1.获取到时间对象的 年份 信息 '+ date.setFullYear(2022))
     console.log(' 2.获取到时间对象的 月份 信息 '+ date.setMonth(3))
     console.log(' 3.获取到时间对象的 日期 信息 '+ date.setDate(28))
     console.log(' 4.获取到时间对象的 小时 信息 '+ date.setHours(14))
     console.log(' 5.获取到时间对象的 分钟 信息 '+ date.setMinutes(13))
     console.log(' 6.获取到时间对象的 秒钟 信息 '+ date.setSeconds(14))

     date.setTime(1012255552222)
     console.log(' 时间戳 '+ date)

     console.log('---四 ：封装函数，获取两个时间节点之间的时间差--------')
     
     var time1 = new Date(2021,1,23,11,22,18)  //2021年2月23日11点22分18秒
     var time2 = new Date(2021,1,25,12,45,36)   //2021年2月25号12点45分36秒
     
     // 准备一个函数 接受2个参数
     function getDiff(time1,time2){
     
     //两个时间节点的时间挫
     var ms1 = time1.getTime()
     var ms2 = time2.getTime()
     //两个时间挫相减得到相差的描述
     var sub = Math.ceil( (ms2 - ms1) / 1000)  //ceil 向上取整 
     var day = Math.floor(sub % (60 *60 *24))  //floor 向下取整 天
     var hours = Math.floor(sub % (60 * 60 * 24 ) / (60 * 60 )) // 小时
     var minutes = Math.floor(sub % (60*60) / 60)
     var seconds = sub % 60 

     return { day: day, hours :hours ,minutes : minutes, seconds : seconds}
    }

    //获取 time1 和 time 2 之前的时间差
   
    var res = getDiff(time1,time2)
    console.log(' 时间差 ： ' + res )
    

     </script>
    
</body>

</html>

1.4 JavaScript的BOM操作

                            BQM - Browser Qhject Model


一整套操作浏览器相关内容的属性和方法
操作浏览器历史记录
操作浏览器滚动条操作浏览器页面跳转
操作浏览器标签页的开启和关闭


<!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>Document</title>
</head>
<body>

    <script>
        //获取浏览器可视窗口的宽度
        var width = window.innerWidth;
        //获取浏览器可视窗口的高度
        var height = window.innerHeight;
        console.log('窗口宽度 '+ width +" 窗口高度  " + height);
          
        console.log('--- 浏览器的弹出层 ---/n');
        /* 1.提示框 ： window.alert('提示信息')
           2.询问框 ： window.confirm('提示信息') // 布尔值
           3. 输入框 ： window.prompt('提示信息')  //弹出你输入的信息
        */


        var b = window.confirm('正确和错误');
        console.log(' 输出 '+b);

     </script>
    
</body>
</html>

1.4.1点击事件

<!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>Document</title>
</head>

    <script> 
        //开启点击事件
        on.onclick = function(){
            window.open('http://www.dangdang.com')
        }

        //关闭页面
        off.onclick = function(){
            window.close
        }
        
        
    </script>


<body>

    <button id="on"> 开启 </button>
    <button id="off"> 关闭 </button>
 
</body>
</html>

1.4.2 浏览器常见事件

<!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>Document</title>
</head>
<body>

    <script>
         /*浏览器常见事件

          资源加载完毕后执行: window.onload = function(){}
          可视尺寸改变: window.onresize = function (){}
          滚动条位置改变:window.onscroll = function (){}
          */
          window.onload = function(){
              console.log(' 页面图片全部显示出来 --资源加载完毕 ')
          }
    </script>


    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210611094Q512b-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651763443&t=9db0cba2150a22d7e0580ffb32d2c1d0">

</body>
</html>

1.4.3 窗口改变事件

    <script>
        window.onresize = function(){
            console.log('窗口改变了')
        }
     </script>

1.4.4 滚动条事件

<!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>Document</title>
</head>

 <style> 
  body{
      width: 3000px;
      height: 3000px;
  }


</style>

<body>


    <script>
       window.onscroll = function(){
           console.log('滚动条位置改变了')  //划动滚动条就变化
       }
     </script>
    
</body>
</html>

1.4.5

1.5 JavaScript的定时器

1.5.1间隔定时器
按照指定周期(毫秒)去执行指定的代码

<script>

setInterval(function ()){

console.log('执行一次')

},1000) //1000 = 1 毫秒

</script>

1.5.2延时定时器：
在固定的时间(毫秒)后指定一次代码

语法: setTimeout(函数，时间)
函数 : 时间到达执行的内容时间∶单位是毫秒

setTimeout(function()){

console.log('执行一次') //要执行的代码

},1000)

1.5.3 关闭定时器

语法一： clerarInterval(要关闭的定时器返回值)

语法二： clearTimeout(要关闭的定时器返回值)

注意︰不区分定时器种类

1.6

1.7

1.8

1.9

1.10

1.12

5. 6.7.8.9.10.11.12.13.14.15.16.1718.19.

努力的编程的小白1

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端学习大全（小练习）

1.javascript基础 1.1字符串常见使用 <!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,...
复制链接

扫一扫