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

相关阅读:
进入软件行业的几点建议
 excel功能区（ribbonx）编程笔记6-box的使用
 羽毛球馆预约小程序 v9.0.1
业务中台（功能编排+领域模型的结合）-spider-node
redis学习总结-可删除
 latex的安装及设置（为学术服务）
数据迁移工具，用这8种就够了!
氨丙基表面修饰二氧化硅亚微米微球/二氧化硅微球表面负载硫化亚铁纳米晶
 快速实现数组排序sort
java编辑pdf（itextpdf）
原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126555537