JavaScript 基础入门速成上篇

news2024/9/24 1:25:11

JavaScript 嵌入页面的方式

1. 行间事件 

<button onclick="alert('点击按钮')">按钮</button>

2. script标签

<script type="text/javascript">
    console.log('Hello javascript !')
</script>

3. 外部引入

<script type="text/javascript" src="./js/index.js></script>

JavaScript 基本语法

Javascript 注释

// 单行注释
/*
   多行注释
*/

变量

定义变量

        JavaScript 是一种弱类型的语言,javascript 的变量类型由它的值来决定,定义变量要用关键字 'var' ;( var num = 1;var str = '1' )

// 定义变量
var x = 1;
var y = '1';
var z = true;

// 可以这么写,执行效率更高
var x = 1, y = '1', z = true ;

变量类型

JavaScript 有5种基本数据类型 —— sun nb ,1种复合类型 —— o

1. String 字符串类型;

2. undefined undefined类型,变量声明但未初始化,值为undefined;

3. number 数字类型;

4. null null类型,即空对象,如果定义的变量是待保存对象,可以将变量初始化为null,在页面中获取不到对象,则返回的值就是 null;

5. Boolean 布尔值类型,true 和 false 

6. object 即对象,复合类型


命名规范

变量、函数、属性、函数参数命名规范 :

1. 区分大小写;

2. 第一个字符必须是字母,下划线 或者 $ 美元符号;

3. 其他字符可以是字母或者数字,下划线或者 $ ;


函数

函数 —— 重复执行的代码片段

函数的定义与执行

        使用 function 函数名(){ } 定义,函数执行为 函数名()

<script>
    // 函数定义
    function sayHello() {
        alert('Hello Word!')
    }
    // 调用函数
    sayHello()
</script>

函数传参

        javascript 的函数中可以传递参数 

        参数有 "形参" 和 "实参",形参即形式参数,实参即实际参数,看如下的例子,function sum(num1,num2) { ... } ,这个函数中的num1 和 num2 属于形参,待接收实际的参数进来,而调用函数时 sum(3,4) 中的 3,4 就是实际参数了.

<script type="text/javascript">
    // 定义带有参数的函数
    function sum(num1, num2) {
        console.log('总计:' + num1 + num2)
    } 
    sum(3,4)    // 传参
</script>

函数 return 关键字 

        作用:1. 返回函数的值或者对象        2. 结束函数的运行

1. 返回函数的值或对象

<script>
function sum(num1, num2) {
    return num1 + num2
}
sum(1,2)              // 返回的是函数的值
console.log(sum(1,2)) // 打印 输出:3
</script>

 2. 结束函数执行

<script>
function sum(num1, num2) {
    // isInteger 是否为整数
    if(Number.isInteger(num1) || Number.isInteger(num2)){ 
        // num1 或 num2 有一个是非整数时反馈且停止
        alert('Error : int error')
        return
    }else{
        console.log(num1 + num2)
    }
}
sum(1,1.11)
</script>

变量与函数的预解析

        JavaScript 解析过程分为两个阶段,编译阶段 —— 》执行阶段,在编译阶段会将 function 定义的函数提前,并将 var 定义的变量声明提前,将它赋值为 undefined;

        上面的函数定义中是先进行的 【函数的定义】 然后再 【调用函数】;那么 JavaScript 的特点就是有这个预解析(将js代码预读一篇,将定义的代码提前),可以先调用再定义,如下:

<script type="text/javascript">
    // 调用函数
    sayHello();    
    // 定义函数
    function sayHello() {
        alert('Hello World!')
    }
</script>

        变量也同样,来看一下变量的与解析:可以想一下结果是什么

<script>
    alert(num);
    var num = 1;
    alert(num);
</script>

        弹窗的结果为:undefined —— 1 ;var 定义的变量声明提前,将它赋值为 undefined,第一个 alert(num) 为undefined,接着num赋值1,第二个alert(num) 就为 1,主要还是函数的预解析。


条件语句

        条件语句 —— 通过条件来控制程序的走向

条件运算符: == 、 === 、> 、>=、<、<= 、!= 、&& 、||、|

if else 语句

<script>
    var numA = 1 , numB = '1'
    if(numA == numB){
        console.log('相等');
    }else{
        console.log('不相等');
    }

    // 结果:相等
</script>

        numA 是数字类型,numB是字符串类型,== 逻辑运算符会默认的将两边的变量转为同一类型,即隐式转化。== 逻辑运算符判断是不够严谨,那么使用严格的判断可以使用 === 

<script>
    var numA = 1 , numB = '1'
    if(numA === numB){
        console.log('相等');
    }else{
        console.log('不相等');
    }

    // 结果:不相等
</script>

&&运算符

<script>
    var numA = 10
    if(numA > 1 && numA <10){
        // numA > 1 且 < 10 
        alert('符合')   
    }else{
        // > 1 和 < 10 至少有一个不满足
        alert('不符合')
    }
</script>

|| 运算符

<script>
    var numB = 10
    if(numB < 1 || numB > 9){
        // numB < 1 或者 numB > 9 符合 
        alert('符合')
    }else{
        alert('不符合')
    }
</script>

多重的 if else 语句

<script>
    var result = 10;
    if(result > 7 && result <= 10){
        alert('优')
    }else if(result > 4 && result < 8){
        alert('良')
    }else{
        alert('你完了!')
    }

</script>

获取元素方法

        元素(节点,DOM对象,元素 — 叫法不同)   

        可以使用内置对象 document 上的 getElementById 方法来获取页面上设置 id 属性的元素,获取的是一个html对象,然后赋值给到一个变量:

<div id="box">这是一个div元素</div>

// 如何来获取?
<script>
    var obox = document.getElementById('box');
</script>


// class - document.getElementsByClassName('')
// 标签 - document.getElementsByTagName('')
// name - document.getElementsByName('')

        这里需要注意写法:刚入门的可能容易出错;

错误示范:

<!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>
    <script>
        // 直接写在这里也是错误的
        var obox = document.getElementById('box');
    </script>
</head>
<body>
    <script>
        // 写在div元素前面错误
        var obox = document.getElementById('box');
    </script>
    <div id="box">这是一个div元素</div>    
</body>
</html>

正确写法:( javascript 代码是从上到下开始执行 )

<!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>
    <script>
        // 在这里需要这样写
        // window.onload 在页面加载完成之后再执行
        window.onload = function(){
            var obox = document.getElementById('box');
        }
    </script>
</head>
<body>
    <div id="box">这是一个div元素</div>    
       ... 这里放置html..
    
    <script>
        // js写在后面
        var obox = document.getElementById('box');
    </script>
</body>
</html>

操作元素属性

        获取页面元素之后,就可以对页面元素的属性进行操作,例如操作css样式 ,属性操作包括读和写。

操作元素属性:

        var 变量 = 元素.属性名.读取属性       |        元素.属性名 = 新属性值.改写属性

属性名在 js 中的写法:

        1.  html 属性和 js 里面的属性写法一样

        2. class 属性写成 className (class 是保留的关键字)

        3.  style 属性里面的属性,有 ' - ' 的改写驼峰式写法:如 font-size 改写为 fontSize

下面来操作一些DOM元素属性:

<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>
    #box{ width: 150px;height: 150px;background: purple;}
</style>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        // 获取DOM元素
        var obox = document.getElementById('box');
        // 操作DOM元素属性 - 样式
        obox.style.background = 'red'
    </script>
</body>
</html>

        在将 150 * 150px的紫色purple盒子通过 js 操作DOM元素属性的方式变成了红色;当然还可以操作它的其他属性,如 style.width 和 style.height 。

         这里需要注意的是不推荐以下的这种操作DOM元素属性的写法:

obox.style = " ... "

        最好的方式就是在style后面跟上节点:style.width 、style.height 、style.fontSize ,虽然浏览器支持这种写法,但不提倡,避免样式被覆盖,要使用可以添加上 cssText 

obox.style.cssText = "background: yellow"

innerHtml 在页面会被解析

<div id="box"></div>

<script>
    // 往id="box"的div元素中插入p元素
    var obox = document.getElementById('box');
    obox.innerHtml = '<p> p元素 </p>'
</script>

innerText 在页面不会被解析

<div id="box"></div>

<script>
    // 往id="box"的div元素中插入p元素
    var obox = document.getElementById('box');
    obox.innerText= '<p> p元素 </p>'
</script>

 事件

        最常熟悉听到的就是 '点击事件',即onclick,点击按钮触发 onclick事件等,下面来看事件:

        事件有鼠标触发的、键盘触发的还有系统触发,很好理解,鼠标的就可以点击,双击,按下抬起移动这些,键盘也有,系统的就刚刚使用的onload,系统加载完成之后再去触发;

鼠标:
    onclick         鼠标单击
    ondblclick      双击左键
    onmousedown     按下触发
    onmouseup       抬起触发
    onmousemove     移动触发
    onmouseenter    移入
    onmouseleave    移出
    onmouseover     移入
    onmouseout      移出
键盘:
    onkeydown       按下键盘
    onkeypress      仅监听字母数字 - 特殊字符不监听
    onkeyup         松开触发
系统:
    onload
    onerror ...

        下面来简单的讲用法,然后可以根据这个自行测试:

鼠标:以刚刚的案例中来完成,将鼠标移入的时候进行弹窗.

<!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>
    #box{ width: 150px;height: 150px;background: purple;}
</style>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        // 获取DOM元素
        var obox = document.getElementById('box');
        // 鼠标事件
        obox.onmousemove = function(){
            alert('弄到我了')
        }
    </script>
</body>
</html>

键盘:可以通过input,输入的时候触发弹窗.

<body>
    <input type="text" id="inputOn" />
    <script>
        var inputOn = document.getElementById('inputOn');
        // 按下键盘抬起后触发
        inputOn.onkeyup = function(){
            alert('别动键盘啊!')
        }
    </script>
</body>

        这里对应的事件后面接着一个匿名函数 function () { } ,当然我们不能直接写一个匿名函数function () { } 使用,这样会报错 ! 

document.getElementById('btn').onclick = function(){ ... }

// 第二种写法 —— 调用方法 
// 定义方法 function 函数名称() {  }
function handleClick() { ... }    
document.getElementById('btn').onclick = handleClick

自定义属性

        上述讲到了操作元素属性,那么像 style.width 和 style.background 这里的这些width属性都是定义好了的,那么如何来进行一个自定义属性呢?有这样三个方法分别来获取设置和移除。

        1. 获取属性 —— getAttribute()

        2. 设置属性 —— setAttribute()

        3. 移除属性 —— removeAttribute()

<!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>
    <div id="box" author="lhxz"></div>
    <script>
        var obox = document.getElementById('box')
        // 获取属性
        var result = obox.getAttribute('author') 
        console.log(result) // lhxz

        // 设置属性
        obox.setAttribute('age','18')

        // 删除属性
        // obox.removeAttribute('age')
    </script>
</body>
</html>


          那么了解到这里就需要来完成两个案例了,现在就是测试你对前面内容的理解了;

案例测试一 :

        这个案例可能有些读者见过,投稿来的一个案例,所以这个案例其实也是有比较多涉及上述中所讲的知识点。

实现思路[小白解析]:

        对于html和css的部分就不再多讲了,通过这个 " + " 来设置一个点击事件,这个点击事件是实现切出这个输入框的,切出输入框的时候可以进行一个获取输入框的一个焦点,让用户输入内容进行添加,输入input框中的内容需要做一个监听获取,"添加" 也是一个点击事件,首先是拿到input框监听获取到的,通过点击添加将这段内容插入到一个节点当中去,然后进行一个隐藏输入框,那么再隐藏输入框之前需要将input框中的数据清空,避免再点击 " + " 是上次的数据内容。

( 注 : 建议自己理清楚思路再动手,或者先跟着代码来一遍,最后再自己实现一遍 )

<style> 标签样式放在下一个代码块,需要关注的还是对JS的操作:

<!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>
    <div id="ct">
        <p>
            <span id="title">最新动态</span>
            <input id="search" type="text" placeholder="请输入..." onchange="handleChange(event)"/>
            <input id="btno" type="button" value="添加"/>
            <span id="add">+</span>
        </p>
        <ul id="list">
        </ul>
    </div>
    <script>
        var add = document.getElementById('add')
        var search = document.getElementById('search')
        var btno = document.getElementById('btno')
        var list = document.getElementById('list')
        
        add.onclick = function(){
            search.style.display = 'block'
            btno.style.display = 'block'
            search.focus()  // 获取焦点
        }
        // 获取输入的内容
        var inputOn = ''  // 待接收
        // 监听
        function handleChange(e){ 
            console.log(e.target.value)
            inputOn = e.target.value    
        }
        // 添加
        btno.onclick = function(e){
            // 插入节点
            list.innerHTML += '<li>' + inputOn + '</li>'
            // 清空
            search.value = ''
            // 关闭
            search.style.display = 'none'
            btno.style.display = 'none'
        }
    </script>
</body>
</html>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #ct{
            width: 300px;
            border: 1px solid black;
        }
        #ct p {
            height: 25px;
            background: #000;
        }
        #ct p #title{
            float: left;
            color: white;
            line-height: 25px;
            border: none;
            margin-left: 7px;
        }
        #search{
            display: none;
            float: left;
            width: 120px;
            height: 18px;
            border: none;
            margin-top: 3.5px;
            margin-left: 4px;
            outline: none;
            padding-left: 10px;
        }
        #btno{
            display: none;
            float: left;
            width: 40px;
            height: 18px;
            line-height: 19px;
            background-color: red;
            color: #fff;
            border: none; 
            margin-top: 3.5px;
            cursor: pointer;
        }
        #add{
            float: right;
            color: #fff;
            cursor: pointer;
            margin-right: 7px;
        }
        ul,li{ list-style: none; }
        li{
            padding:0 10px ;
        }
        
</style>

案例测试二 :

        这个案例与前面的案例还是有一些相似点,但还是有一些不一样,一些侧重的部分,主要还是使用 JS 来操作DOM元素及元素属性;

( 这个案例与前面的案例有类似的点但也有不一样的地方 )

实现思路[小白解析] :

        " 发表 " 做鼠标点击事件将输入框中的内容以及当前的发表的用户头像进行一个整合插入到节点当中去,点击用户头像可以进行一个用户头像切换,头像可以通过属性src获取,那么输入框中的数据与之前一样需要做监听获取。

<!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>
    <div id="box">
        <textarea id="text" onchange="handleChange(event)"></textarea>
        <img id="imgs" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F22%2F20210622140718_0b391.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681985076&t=ec28bdbeecfa7f7e55c2236aeccb51b8"/>
        <span id="send">发表</span>
    </div>
    <ul id="list">
        <li>
            <img class="list-head" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F22%2F20210622140718_0b391.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681985076&t=ec28bdbeecfa7f7e55c2236aeccb51b8"/>
            <span class="list-comments">门廊斜风细雨霖铃,墨香氤氲声如许,衣带生风,打湿我的眉心。笑容可以瞒过别人,可心痛却骗不了自己。</span>
        </li>
    </ul>

    <script>
        var send = document.getElementById('send');
        var imgs = document.getElementById('imgs');
        var list = document.getElementById('list');
        var txt = document.getElementById('text');

        // 获取textarea值
        var textStr = ''    //待接收
        function handleChange(e){
            // console.log(e.target.value)
            textStr = e.target.value
        }

        // 切换头像
        var isHead = true
        imgs.onclick = function(){
            if(isHead){
                imgs.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F28%2F20210628204020_17863.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681985713&t=f0aa3cac36771824e8c93b49ab9d7be6"
                isHead = !isHead
            }else{
                imgs.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F22%2F20210622140718_0b391.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681985076&t=ec28bdbeecfa7f7e55c2236aeccb51b8"
                isHead = !isHead
            }
        }

        
        // 点击发表
        send.onclick = function(){
            // 插入节点 - 头像 - 内容

            // 获取当前头像
            // console.log(imgs.getAttribute('src'))
            var nowHeadSrc = imgs.getAttribute('src')

            // list.innerHTML += '<li>' + '<img class="list-head" src=' + nowHeadSrc +'/>' + textStr + '</li>'

            // 模板
            var template = '<li>' + '<img class="list-head" src=' + nowHeadSrc + '>' + 
                                    '<span class="list-comments">' + textStr + '</span>' +
                           '</li>'
            list.innerHTML += template
            //  清空输入框  
            txt.value = ''
        }
        

    </script>
</body>
</html>
<style>
    *{
        padding: 0;
        margin: 0 auto;
    }
    ul,li{
        list-style: none;
    }
    #box{
        width: 300px;
        height: 120px;
        background: #C8C8C8;
    }
    #text{
        width: 290px;
        height: 80px;
        margin: 5px 5px 0 5px;
        border: none;
        outline: none;
        padding-left: 5px 5px;
        resize: none;
    }
    #imgs{
        float: left;
        margin-left: 5px;
        width: 25px;
        height: 25px;
        border: 1.5px solid #fff;
        background-color: red;
    }
    #send{
        float: right;
        margin-right: 5px;
        width: 60px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: #FF6715;
        margin-top: 5px;
        font-size: 12px;
        font-weight: 700;
        color: white;
        border-radius: 3px;
        cursor: pointer;
    }
    #list{
        margin-top: 20px;
        margin-left: 5px;
    }
    li{
        width: 300px;
        height: 50px;
    }
    .list-head{
        float: left;
        width: 40px;
        height: 40px;
        border: 1.5px solid #fff;
        box-shadow: 2px 2px #c8c8c878;
    }
    .list-comments{
        float: left;
        display: block;
        width: 240px;
        margin-left: 10px;
        font-size: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

        本篇内容就此结束,分为上下两篇内容,期待下期再见,感兴趣的读者点赞关注下,感谢大家的支持!!! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/431097.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

并发编程三要素:可见性、原子性、有序性

一、介绍 1、什么是可见性、原子性、有序性&#xff1f; 可见性&#xff08;visibility&#xff09;&#xff1a;指一个线程对共享变量的修改能够被其他线程立即看到的特性。在多线程环境下&#xff0c;如果一个线程修改了一个共享变量的值&#xff0c;那么其他线程可能无法立…

时隔两个多月,一起来看ChatGPT现况如何?

ChatGPT这股风吹了两个多月&#xff0c;时至今日&#xff0c;各平台上与ChatGPT相关的文章&#xff0c;到现在依旧拥有着不小的流量。三月中旬上线了ChatGPT-4&#xff0c;与我们的文心一言前后脚发布&#xff0c;而后阿里的“通义千问”也展现了不俗的实力&#xff0c;那到现在…

【多线程】初识多线程

1. 为什么要学习多线程&#xff1f;首先相信各位小伙伴在学习 JavaSE 的时候&#xff0c;肯定写过一些小游戏吧&#xff0c;比如猜数字&#xff0c;关机小程序...但是如果现在要在猜数字小游戏上面加上一个功能&#xff0c;设定20秒没猜中&#xff0c;就判定游戏失败&#xff0…

数据结构:什么是堆,和二叉树有什么关系

堆栈模型 JS 代码执行时&#xff0c;值类型变量存储在栈&#xff0c;引用类型变量存储在堆。 // 变量 a 存储在栈里 let num1 1 let num2 num1 num2 2 // 这时打印 num1 是 1&#xff0c;num2 是 2。// { a: 1 } 存在堆里&#xff0c;obj1 只是一个指针引用 let obj1 { a…

华为 WATCH Ultimate 如何开通和使用北斗卫星卡

华为春季新品发布会发布了全新系列手表华为WATCH Ultimate非凡大师&#xff0c;实现了“向上捅破天”的突破性应用&#xff0c;让大家通过手表与世界一直相连。当用户在周围无信号&#xff08;无蜂窝网络/WLAN网络覆盖&#xff09;的情况下&#xff0c;处于空旷无遮挡的环境时&…

基于超声波传感器的液位测量及控制系统设计(STM32)

一、引言 随着工业的发展&#xff0c;计算机、微电子、传感器等高新技术的应用和研究&#xff0c;液位仪表的研制得到了长足的发展&#xff0c;以适应越来越高的应用要求。液位的测量在工业生产过程中已经起着相当重要的作用&#xff0c;其类型大概可以分为接触型和非接触型两大…

最近搭了一个数据监测看板。

在大数据时代&#xff08;这个开头我已经看腻了 &#xff09;&#xff0c;为了挖掘冗余数据的价值&#xff0c;数据分析需求日益增多&#xff0c;而分析结果的常见表现形式有数据分析报告和数据看板&#xff08;大屏&#xff09;&#xff0c;与报告文档不同&#xff0c;数据看板…

8.1.0:DHTMLX Suite JavaScript UI Crack

适用于现代 Web 应用程序的强大 JavaScript 小部件库 - DHTMLX 套件 用于创建现代用户界面的轻量级、快速且通用的 JavaScript/HTML5 UI 小部件库。 DHTMLX Suite 有助于推进 Web 开发和构建具有丰富功能的数据密集型应用程序。 DHTMLX Suite 是一个 UI 小部件库&#xff0c;用…

移动端高性能Unity播放器实现方案

前情提要&#xff1a; 视听体验再进化——如何在24小时内全面升级你的视频应用 如何打造新时代的终端播放产品&#xff1f; 随着VR、AR、元宇宙等新玩法的出现&#xff0c;Unity平台的视频播放需求逐渐增加&#xff0c;比如下面两个动图就是在百度真实的案例。前者是演唱会场景…

ChatGPT能够知道当下最流行的开发语言,以及各语言哪个开发框架最火吗?

如果你准备成为一名开发人员&#xff0c;但是面对琳琅满目的开发语言&#xff0c;然后每种语言的开发框架却无从下手&#xff0c;张三推荐你学这个&#xff0c;李四推荐你学那个&#xff0c;而你的时间又是有限的&#xff0c;于是我决定问一问这个万事通ChatGPT。 目录 1. 目前…

C语言小项目 -- 扫雷游戏完整代码(递归展开 + 选择标记)

目录 &#x1f680;0. 游戏介绍&#xff1a; &#x1f437; 游戏规则 &#x1f6f8;雷诀八条 &#x1f680;1. 开发环境及框架&#xff1a; &#x1f680;2. 游戏具体功能分析实现&#xff1a; &#x1f437;2.1 棋盘 &#x1f437;2.2 棋盘初始化 init_Board; &#x1…

用Abp实现两步验证(Two-Factor Authentication,2FA)登录(三):免登录验证

文章目录原理修改请求报文配置JwtBearerOptions生成Token校验Token修改认证EndPoint修改前端登录登出最终效果项目地址免登录验证是用户在首次两步验证通过后&#xff0c;在常用的设备&#xff08;浏览器&#xff09;中&#xff0c;在一定时间内不需要再次输入验证码直接登录。…

Go 语言 入门 基于 GoLand 2023.1 创建第一个Go程序

文章目录Go 语言 入门go 语言是什么?go 入门 需要 学习 什么?Go 语言有 那些优势?Go 语言 与 Java 语言 对比Go 语言 与Python 语言 对比Go 语言 基于 GoLand 创建第一个程序1. 打开 GoLand2.选择 new3. 选择SDK版本4. 输入项目名称,点击 cteate项目创建完成下一步,创建一个…

SpringBoot-心跳机制+redis实现网站实时在线人数统计

在社交网站中&#xff0c;通常需要实时统计某个网站的在线人数&#xff0c;通过该指标来实时帮助运营人员更好的维护网站业务&#xff1a; 先说一下目前在市面上主流的做法再加上我自己查阅的资料总结&#xff1a; 创建一个session监听器&#xff0c;在用户登录时即创建一个s…

WEB集群之反向代理,动静分离,NFS,mysql,MHA高可用

目录 第一章实验架构 1.1.实验图谱架构 1.2.实验前环境部署 第二章实验步骤 2.1.在ha01&#xff0c;ha02上部署keeplived,lvs-dr 2.2.Slave01,slave02安装nginx 2.3.LVS负载均衡 2.4.搭建动态网页 2.5.nginx反向代理 2.6.部署NFS 2.7.安装mysql 2.8.安装mha 2.9.主…

教你安装 CodeWhisperer: 一款个人免费的类似GitHubCopilot能代码补全的 AI 编程助手

1、官网 AI Code Generator - Amazon CodeWhisperer - AWS 官方扩展安装教程 2、安装VSCode 下载安装VSCode 3、VSCode安装CodeWhisperer插件 安装VSCode插件 - AWS Toolkit主侧栏&#xff0c;点击AWS &#xff0c;展开CodeWhisperer&#xff0c;点击Start 在下拉菜单中点…

洗浴中心管理系统【GUI/Swing+MySQL】(Java课设)

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 本系统源码地址&#xff1a; 更多系统资源库地址&#xff1a;骚戴的博客_CSDN_更多系统资源 更多系统…

煤矿井下人员精准定位系统,煤矿应急救援高效应用

煤矿行业的安全发展&#xff0c;事关数人民群众的生命财产安全。自2020年起&#xff0c;国家连续三年出台煤矿智能化建设及重大风险防控的相关指导政策&#xff0c;其中&#xff0c;2022年出台的《煤矿及重点非煤矿山重大灾害风险防控建设工作总体方案》中提到&#xff0c;要充…

52 openEuler搭建PostgreSQL数据库服务器-管理数据库角色

文章目录52 openEuler搭建PostgreSQL数据库服务器-管理数据库角色52.1 创建角色创建角色示例52.2 查看角色查看角色示例52.3 修改角色52.3.1 修改用户名52.3.2 修改用户示例52.3.3 修改用户密码52.3.4 修改角色密码示例52.4 删除角色删除角色示例52.5 角色授权角色授权示例52.6…

Python旅游好帮手:提前15天准备五一旅游景点详细数据

人生苦短&#xff0c;我用python 虽然还是有15天才放五一的假&#xff0c; 但是我的心早已经在旅游的路上了~ 本文源码&#xff1a;点击此处跳转文末名片获取 趁现在&#xff0c;先来用python做一个旅游攻略 知识点&#xff1a; requests parsel csv 第三方库&#x…