JS(一)

1.js引入方式

两种方式
内部和外部
注释

//单行注释
/*多行注释*/
1
2

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="button" value="按钮" onclick="alert('按钮点击了')">
body>
<script>
    //单行注释
    /*多行注释*/
    //控制台输出
    console.log("内部js代码执行成功!");
script>
<script src="my.js">script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.方法

三种定义方式

    function f4(x,y) {
        return x*y;
    }
    let result = f4(5,9);
    console.log(result);
    //第二种定义方法的方式
    let f5=function (name,age) {
        console.log(name+":"+age);
    }
    f5("李四",30);
    //第三种定义方法的方式
    let f6=new Function("name","age","console.log(name+':'+age)");
    f6("王五",20);
1
2
3
4
5
6
7
8
9
10
11
12
13

小例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<input type="button" value="按钮" onclick="f1()">
body>
<script>
    //1.无参无返回值方法
    function f1() {
        console.log("f1");
    }
    //调用方法
    f1();
    //2.有参五返回值方法
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("张三",50);
    //3.无参有返回值
    function f3() {
        return "这是返回值";
    }
    let info=f3();
    console.log(info);
    //4.有参有返回值
    function f4(x,y) {
        return x*y;
    }
    let result = f4(5,9);
    console.log(result);
    //第二种定义方法的方式
    let f5=function (name,age) {
        console.log(name+":"+age);
    }
    f5("李四",30);
    //第三种定义方法的方式
    let f6=new Function("name","age","console.log(name+':'+age)");
    f6("王五",20);
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

3.页面相关方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>这是divdiv>
<input type="text">
<input type="button" value="按钮" onclick="f()">
body>
<script>
    function f() {
        let d = document.querySelector("div");
        let i = document.querySelector("input");
        //把文本框的值取出赋值给div
        d.innerText=i.value;
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.平方练习

当变量进行-*/时会自动将变量转成数值如果两个变量是字符串加法运算是字符串拼接
parseFloat 将字符串转成整数或小数

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text">
<input type="button" value="和" onclick="f()">
<div>结果:div>
body>
<script>
    function f() {
        let d = document.querySelector("div");
        let i = document.querySelector("input");
        //判断用户输入的内容是否是数值
        if(isNaN(i.value)){
            d.innerText="输入错误";
            return;
        }
        //把文本框里面的内容相乘得到平方的值 NaN*NaN
        // d.innerText = "结果:"+ i.value*i.value;
        //当变量进行-*/时会自动将变量转成数值 如果两个变量是字符串加法运算是字符串拼接
        //让文本框的值*1 就是将文本框里面的字符串自动转成数值
        // d.innerText = "结果:"+(i.value*1+i.value*1);
        //parseFloat 将字符串转成整数或小数
        d.innerText="结果:"+(parseFloat(i.value)+parseFloat(i.value));
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5.计算器练习

写法1

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" name="" id="i1">
<input type="text" name="" id="i2">
<input type="button" value="加" onclick="f1()">
<input type="button" value="减" onclick="f2()">
<input type="button" value="乘" onclick="f3()">
<input type="button" value="除" onclick="f4()">
<div>结果:div>
body>
<script>
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    function f1() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value*1+i2.value*1);
    }
    function f2() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value-i2.value);
    }
    function f3() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value*i2.value);
    }
    function f4() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value/i2.value);
    }

script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

写法2

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" name="" id="i1">
<input type="text" name="" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>结果:div>
body>
<script>
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    function f(x) {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        switch (x) {
            case 1:{
                d.innerText="结果:"+(i1.value*1+i2.value*1);
            }
            break;
            case 2:{
                d.innerText="结果:"+(i1.value-i2.value);
            }
            break;
            case 3:{
                d.innerText="结果:"+(i1.value*i2.value);
            }
            break;
            case 4:{
                d.innerText="结果:"+(i1.value/i2.value);
            }
            break;
        }
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

6.猜数字

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" placeholder="请输入1-100之间的整数">
<input type="button" value="猜一猜" name="" id="" onclick="f()">
<div>div>
body>
<script>
    let x=parseInt(Math.random()*100)+1;
    let i = document.querySelector("input");
    let d = document.querySelector("div");
    console.log(x);
    let count=0;
    function f(){
        count++;
        if(i.value>x){
            d.innerText="猜大了";
        }else if(i.value<x){
            d.innerText="猜小了";
        }else{
            d.innerText="恭喜你第"+count+"次猜对了";
        }
        i.value="";//清空文本框
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

相关阅读:
这些傻白甜的Linux命令，不会有人教你！
A_A07_001 TFT彩图提取软件使用
 2022-09-18 mysql-subselect相关执行流程记录
 （十一）Jmeter调用webService接口
 使用Docker搭建WordPress私人博客
 【转】大数据安全--敏感数据识别和分级打标
 vue 在beforeRouteEnter中获取 this 和操作 data 中的数据
 java-php-python-基于Springboot的水世界乐园管理系统计算机毕业设计
 CodeMirror 创建标签计算编辑器
 Android 10 如何在通知栏下拉状态栏会暂停第三方应用播放视频
原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126555537