javaScript入门_+this.value-CSDN博客

本文链接：https://blog.csdn.net/weixin_45471954/article/details/124340669

所需掌握知识点

在这里插入图片描述

第一个js程序

在这里插入图片描述

第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>

js脚本

alert("12321");

js变量

js中没有类型区分
在这里插入图片描述

js中的调试

在这里插入图片描述

自定义函数

在这里插入图片描述

测试案例在这里插入图片描述

数据类型及转换

数据类型

在这里插入图片描述

类型转换

在这里插入图片描述

变量作用域

在这里插入图片描述

运算符

在这里插入图片描述
运算符优先级

逻辑预算符

程序控制语句

/*
* 成绩 是100分 显示满分
* 成绩大于等于90，显示优秀
* 大于等于70，显示良好
* 大于等于60，显示及格
* 否则，不及格
* */

var myscore=80;
var str;
var n=parseInt(myscore/10);
switch (n) {
    case 10:
        str="manfen";
        break;
    case 9:
        str="youxiu";
        break;
    case 8:
        str="良好";
        break;
    case 7:
        str="及格";
        break;
    default:
        str="不及格";
        break
}
console.log(str);

程序控制语句

在这里插入图片描述

字符函数

在这里插入图片描述

var str="123213121414";
console.log(str.substr(5,3));//起始位置 312
console.log(str.substring(6,10));//起始位置，结束位置
console.log(str.charAt(3))//获取字符串固定位置的值
console.log(str.length);
console.log(str.indexOf(1));//查找1所在位置
//或者是
console.log(str.indexOf(1,4));//代表从4开始查找1第一次出现的位置

在这里插入图片描述

var str="aa,ttt,121,gg,kk,aa,bb";
var arr=str.split(",");//以逗号进行分隔生成一个数组
console.log(arr[0]);//读出str第一个
console.log(str.concat("55,77,00"));//在str后进行拼接
console.log(arr.concat("55","77","00"));//在数组中进行添加3个元素
console.log(str.replace("aa","imooc"));//进行替换aa,只能替换碰到的第一个

该程序的运行结果如下所示
在这里插入图片描述

日期函数

在这里插入图片描述

数组

数组声明

//1.声明或创建一个不指定长度的数组，
var arrayObj = new Array();
//2.声明或创建一个数组并指定长度的数组；
var arrayObj = new Array(5);
//3.创建一个带有默认值的数组:
let array = new Array(2,4,"a","y",8);
//4. 3的简写
var arrayObj=[2,4,"a","y"];

数组遍历

//数组遍历
for(var i in arrayObj){
    console.log(i);
}

注：
之前的for循环也可以用

js操作表单对象

在这里插入图片描述
理解：通过表单才可以获取前台数据，并将它传送到后台里面

click事件和 onload事件

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
//可以在body 添加οnlοad="show()"实现刷新功能
    <form>
            <label>用户名</label>
            <input type="text" id="userName" name ="userName" value="123"/>
            <input type="button" id="btn" onclick="show1()" value="btn"/>

    </form>
</body>
</html>

function show1() {
        document.getElementById("userName").value="asd";
}

点击按钮更改文本框的值
onclick:单击事件
onload:刷新事件

单选按钮的设置方法 radio获取值

案例

function show2() {
    let xb = document.getElementsByName("xb");
    var xbTest;
    if(xb[0].checked){
        xbTest=xb[0].value;
    }else{
        xbTest=xb[1].value;
    }
    alert(xbTest);
}```

```html
  <input type="radio" name="xb"   value="1" checked="checked">男
            <input type="radio" name="xb"   value="0">女<br/>
            <input type="button" onclick="show2()" value="btn"/>

可以根据所选radio获取对应的值

列表框里面的一些设置方法

实现年月日多选框
在这里插入图片描述
实现按钮
代码如下

<body onload="ymd()">
    <form >
   <select name="yyyy" id="yyyy"></select>年
        <select name="mm" id="mm"></select>月
        <select name="dd" id="dd"></select>日
    </form>
</body>

function ymd() {
    var yyyy= document.getElementById("yyyy");
    var mm= document.getElementById("mm");
    var dd= document.getElementById("dd");

    for (let i = 1999; i <2019 ; i++) {
        yyyy.options.add(new Option(i,i));
    }
    for (let i = 1; i <13 ; i++) {
        mm.options.add(new Option(i,i));
    }
    for (let i = 1; i <31 ; i++) {
        dd.options.add(new Option(i,i));
    }
//initSelect(yyyy,1999,2019); 表单元素，开始值，结束值
}

可以对上诉代码进行优化
将重复部分进行抽取
写成

function initSelect(obj,start,end){
	for(var i=start;i<=end;i++){
	obj.options.add(new Option(i,i));
}
}

前面代码可以直接调用即可

进行头像选择

要实现功能：根据select所选框框，进行更换头像

<img id="logoImg" src="../images/2.png" >
        <select id="zzz" name="zxc"  onchange="selectLogo()"></select>

function init() {
    var zzz = document.getElementById("zzz");
    for (var i = 2; i <=4 ; i++) {
        zzz.options.add(new Option(i,i));
    }
}
function selectLogo() {
    var logo =document.getElementById("zzz");
    var n =logo.value;
    alert(n);
    var logoImg=document.getElementById("logoImg");
    logoImg.src="../images/"+n+".png";
}

js对复选框进行处理

代码如下

<form >
   <input type="checkbox" name="interest"><label>游泳</label>
   <input type="checkbox" name="interest"><label>爬山</label>
   <input type="checkbox" name="interest"><label>看书</label>
   <input type="checkbox" name="interest"><label>听歌</label>
   <input type="button" value="all" id="btn1" onclick="checkInterest()">
    </form>

var flag=true;
function checkInterest() {
    let arr = document.getElementsByName("interest");
    for (let i = 0; i <arr.length ; i++) {
        arr[i].checked=flag;
    }
    if(flag){
        document.getElementById("btn1").value="全选"
    }else{
        document.getElementById("btn1").value="全不选"
    }
    flag=!flag;

}

事件

在这里插入图片描述

dom

在这里插入图片描述
理解：用Js控制页面中的元素document.get…

常用操作

在这里插入图片描述

作业: 仿计算器

项目需求

在这里插入图片描述

绑定事件的两种形式

在html中绑定
在这里插入图片描述

计算机面板实现

在这里插入图片描述
html

<body>
<div id="div1">
    <div id="div2">
        <input type="text" id="text" name="">
    </div>
    <div id="div3">
        <input type="button" value="c" id="" name=""/>
        <input type="button" value="<-" id="" name=""/>
        <input type="button" value="+/-" id="" name=""/>
        <input type="button" value="/" id="" name=""/>
        <input type="button" value="1" id="" name=""/>
        <input type="button" value="2" id="" name=""/>
        <input type="button" value="3" id="" name=""/>
        <input type="button" value="*" id="" name=""/>
        <input type="button" value="4" id="" name=""/>
        <input type="button" value="5" id="" name=""/>
        <input type="button" value="6" id="" name=""/>
        <input type="button" value="-" id="" name=""/>
        <input type="button" value="7" id="" name=""/>
        <input type="button" value="8" id="" name=""/>
        <input type="button" value="9" id="" name=""/>
        <input type="button" value="+" id="" name=""/>
        <input type="button" value="0" id="" name=""/>
        <input type="button" value="." id="" name=""/>
        <input type="button" value="=" id="" name=""/>
        <input type="button" value="m" id="" name=""/>

    </div>
</div>

</body>

css

*{
    margin: 0px;
    padding: 0px;
}
div{
    width: 170px;
}
#div1{
    top:60px;
    left: 100px;
    position: absolute;
}
input[type="button"]{
    width: 30px;
    margin-right: 5px;
}
input[type="text"]{
    width: 145px;
}

初始化函数

//初始化函数
function init() {
    let num = document.getElementById("num");
    num.value=0;
    //设置默认值为0
    num.disabled="disabled";
    //设置文本框不能进行输入
}

0-9数字显示优化

通过点击对应数字，获取数字的值，通过getElementsByTagName(“input”)

//实现按钮  获取值,按进去获取值
    let Buttons = document.getElementsByTagName("input");
    for (let i = 0; i <Buttons.length ; i++) {
        Buttons[i].onclick=function () {
            alert(this.value);
        }
    }

若要进行区分显示，即若点击为数字，显示数字，若点击不是数字则不显示
修改后

for (let i = 0; i <Buttons.length ; i++) {
        Buttons[i].onclick=function () {
            if(!isNaN(this.value)){//代表是不是可以转为数字 是的话 返回false
                alert(this.value);
            }else {
                alert("非数字")
            }
        }
    }

计算器第一位数字0的判断和更改

方法

//解决 计算器首位为0的问题
//有2种情况 ，文本框为0或者，长度为0
//1.法1 直接(this.value+num.value)*0;
//2.法2 通过自定义函数判断是否空
function isNull(n) {
    if(n*1=='0'||n.length==null){
        return true;
    }else{
        return false;
    }
}

 for (let i = 0; i <Buttons.length ; i++) {
        Buttons[i].onclick=function () {
            if(!isNaN(this.value)){//代表是不是可以转为数字 是的话 返回false
                if(isNull(num.value)){
                    num.value = this.value;
                    //如果为 0或者空 第一个数字就直接重新赋值，如果不为空 进行加上去 追加判断
                }else{
                    num.value = num.value+this.value;
                }
            }else {
                alert("非数字")
            }
        }
    }

四则运算实现

//初始化函数
function init() {
    let num = document.getElementById("num");
    num.value=0;
    //设置默认值为0
    num.disabled="disabled";
    //设置文本框不能进行输入
    //实现按钮  获取值,按进去获取值
    let Buttons = document.getElementsByTagName("input");
    let btn_num1;//用于存储符号
    let btn_num;//用来存储之前的值
    let fh;//用于记录符号
    for (let i = 0; i <Buttons.length ; i++) {
        Buttons[i].onclick=function () {
            if(!isNaN(this.value)){//代表是不是可以转为数字 是的话 返回false
                if(isNull(num.value)){
                    num.value = this.value;
                    //如果为 0或者空 第一个数字就直接重新赋值，如果不为空 进行加上去 追加判断
                }else{
                    num.value = num.value+this.value;
                }
            }else {
                btn_num1=this.value;//用来存储符号进行判断

                switch (btn_num1) {
                    case '+':
                        btn_num=parseInt(num.value);
                        num.value=0;//运算后 进行清空 重新获取值
                        fh='+';
                    break;
                    case '-':
                        btn_num=parseInt(num.value);
                        num.value=0;//运算后 进行清空 重新获取值
                        fh='-';
                    break;
                    case '*':
                        btn_num=parseInt(num.value);
                        num.value=0;//运算后 进行清空 重新获取值
                        fh='*';
                    break;
                    case '/':
                        btn_num=parseInt(num.value);
                        num.value=0;//运算后 进行清空 重新获取值
                        fh='/';
                    break;
                    case '=':
                        switch (fh) {
                            case '+':
                                num.value=btn_num+parseInt(num.value);
                                //代表之前的值加上现在的值
                                break;
                            case '-':
                                num.value=btn_num-parseInt(num.value);
                                //代表之前的值加上现在的值
                                break;
                            case '*':
                                num.value=btn_num*parseInt(num.value);
                                //代表之前的值加上现在的值
                                break;
                            case '/':
                                if(num.value==0){
                                    num.value=0;
                                    alert("不能这么玩")
                                }else{
                                    num.value=btn_num/parseInt(num.value);
                                    //代表之前的值加上现在的值
                                }

                                break;
                        }
                    break;
                }
            }
        }
    }
}

注意：
1.注意之前数据的存储和清空
2.注意在=中再次进行判断运算符

解决小数点问题

//解决小数问题
function addPoint(n) {
    if(n.indexOf('.')==-1){
        //indexof代表没找到 返回-1
        n=n+'.';
    }
    return n;
}

注意要使用Number进行转化数值类型(兼容int 和 float)

退位键问题

//退位减
function back(n) {
    n=n.substr(0,n.length-1);
    //当n.substr(0,0)时， n==null
    if(isNull(n)){
       n="0";
    }

    return n;
}