js(1)_js(1,)-CSDN博客

本文链接：https://blog.csdn.net/enternal567/article/details/78745709

1.三种弹框
alert() 弹框（警告框）
confirm() 确认框
prompt(“提示信息”,默认值) 输入框

alert("这是一个测试")

运行结果：这里写图片描述

prompt("请输入年龄",18)

运行结果：这里写图片描述

<script>confirm("确定要退出吗")</script>

运行结果：这里写图片描述
2.document.write() 在页面中输出
console.log() 在调试平台
3.var 初始化变量
4.js中数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
5.调用
var car=[1,2,3]
普通数组调用方式：数组名[索引值] //car[0]

var car=["BMW","BYD","大众","奔驰"];
    alert(car[3]);

运行结果：这里写图片描述
var obj={a:1,b:2,c:3}
普通对象调用方式：对象名.键值名 //obj.a
var obj=[{a:1,b:2},{a:3,b:4},{a:3,b:1}]
复杂对象调用方式：对象名[索引值].键值名 //obj[0].a

var info={
        name:"zhangsan",sex:"男",address:"shanxi"
    };
    alert(info.name+","+info.sex);
    var list=[{name:"zhangsan",sex:"男",address:"shanxi"},
        {name:"lisi",sex:"男",address:"shanxi"}];
    alert(list[1].name);

运行结果1：这里写图片描述
运行结果2：
6.运算符
算术运算符：
+ - * / % ++ –
a++ a=a+1
a– a=a-1
a++和++a区别：
区别在赋值时，a++ 先赋值后自加，++a 先自加，后赋值

<script>
    var a= 5, y,z;
    y=a++;
    z=++a;
    alert(a)
    alert(y)
    alert(z)
</script>

运行结果：7,5,7
赋值运算符
+= -= *= /= %=
+号：功能1，连接功能
功能2，数据相加
比较运算符
== 等于
=== 绝对等于
！= 不等于
！== 绝对不等于

大于
< 小于
= 大于等于
<= 小于等于
比较运算符结果一般都为布尔值（true/false）
逻辑运算符
与 &&
或 ||
非 !
与x&&y 两边都为true，结果为true
或 x||y 两边只要有一个为true,结果就为true
非！x 你为true,我为flase
条件运算符（三目运算符）
语法：（条件）?”条件成立时输出的值”:”条件不成立时输出的值”

<script>
    var age=prompt("请输入年龄",18);
    alert((age>=18)?"可以进入":"不可以进入")
</script>

输入值为20：这里写图片描述
7.函数
function funname(){}
带参函数
function funname(a,b){}
带有返回值的函数
return 值
函数调用： onclick 点击事件

<body>
<button onmousemove="show()">click</button>
<button onclick="sum(5,6)">计算</button>
<button onclick="sum(23,6)">计算1</button>
<script>
    function show(){
        alert("测试");
    }
    function sum(x,y){
        var z;
        z=x+y;
        alert(z)
    }
</script>
</body>

运行结果：鼠标放在click上时弹出测试弹框，点击计算结果为11点击计算1结果为29.

<body>
<p>单价:<input type="text" class="price"/></p>
<p>数量:<input type="text" class="num"/></p>
<p><input type="button" class="btn" value="计算" onclick="show()"/></p>
<p>结果:<input type="text" class="result"></p>
<script>
    function show(){
        var price=document.getElementsByClassName("price")[0].value;
        var num=document.getElementsByClassName("num")[0].value;
        var result=price*num;
        document.getElementsByClassName("result")[0].value=result;
    }
</script>
</body>

运行结果：这里写图片描述
简易计算器

<body>
<p>数1:<input type="text" class="one"/></p>
<p>数2:<input type="text" class="two"/></p>
<p><input type="button" class="jia" value="+" onclick="show2()"/></p>
<p><input type="button" class="jian" value="-" onclick="show1()"/></p>
<p><input type="button" class="cheng" value="*" onclick="show()"/></p>
<p><input type="button" class="chu" value="/" onclick="show3()"/></p>
<p>结果:<input type="number" class="result"></p>
<script>
    function show(){
        var one=document.getElementsByClassName("one")[0].value;
        var two=document.getElementsByClassName("two")[0].value;
        var result=one*two;
        document.getElementsByClassName("result")[0].value=result;
    }
    function show1(){
        var one=document.getElementsByClassName("one")[0].value;
        var two=document.getElementsByClassName("two")[0].value;
        var result=one-two;
        document.getElementsByClassName("result")[0].value=result;
    }
    function show3(){
        var one=document.getElementsByClassName("one")[0].value;
        var two=document.getElementsByClassName("two")[0].value;
        var result=one/two;
        document.getElementsByClassName("result")[0].value=result;
    }
    function show2(){
        var one=document.getElementsByClassName("one")[0].value;
        var two=document.getElementsByClassName("two")[0].value;
        var result=one+two;
        document.getElementsByClassName("result")[0].value=result;
    }
</script>
</body>

运行结果：这里写图片描述
8.变量作用域
局部变量：只在函数内部起作用，在函数执行结束后，自动消毁
全局变量：整个页面中起作用，在页面关闭后消毁
如果在函数内部定义变量时，没有写初始化var ，则视为全局变量
获取值的方式有三个：
获取节点内部的内容（包含子标签） innerHTML
获取节点内部纯文本 innerText
获取表单元素中的值 value
找节点
通过 id找：document.getElementById(“id名”)
通过标签名找：document.getElementsByTagName(“标签名”)
通过class 名找：document.getElementsByClassName(“class名”)

<body>
<ul>
    <li>11111</li>
    <li id="one" onclick="show()">22222</li>
    <li>33333</li>
</ul>
<p><input type="text" id="username"/></p>
<p><input type="button" onclick="showlist()" value="click"/></p>
<script>
    function show(){
        alert(document.getElementById("one").innerHTML)
    }
    function showlist(){
        alert(document.getElementById("username").value)
    }
</script>
</body>

这里写图片描述
点击22222时弹出弹框

9，if条件语句
if(){}else{}

<script>
    var income=prompt("请输入你的年收入",10);
    if(income>=10){
        document.write("你可以买汽车了");
    }else if(income>=5){
        document.write("你可以买电动车了");
    }else if(income>=2){
        document.write("你可以买自行车了");
    }else{
        document.write("别买了");
    }
</script>

运行结果：输入大于等于10，弹出可以买汽车，输入大于等于5，弹出可以买电动车，输入大于等于2，弹出可以买电动车。
10.switch 条件语句
parseInt() 强制转换为整数类型
break;程序从当前位置跳出
new Date() //获取当前系统日期
.getDay() //获取星期

<script>
    var day=parseInt(prompt("请输入星期",0));
    switch(day){
        case 0:document.write("今天是星期天");
            break;
        case 1:document.write("今天是星期一");
            break;
        case 2:document.write("今天是星期二");
            break;
        case 3:document.write("今天是星期三");
            break;
        case 4:document.write("今天是星期四");
            break;
        case 5:document.write("今天是星期五");
            break;
        case 6:document.write("今天是星期六");
            break;
        default:document.write("请输入正确星期");
            break;
    }
</script>

运行结果：输入3，弹出今天是星期三
11.for循环语句
for(条件1；条件2；条件3){}

 <script>
    var car=["BMW","BYD","大众","奔驰"]
    for(var i=0;i<4;i++){
        document.write(car[i]+"<br>");
    }
</script>

运行结果：这里写图片描述
输出九九乘法表：

<script>
    document.write("<table border='1' width='800px'>");
       for(var x=1;x<10;x++) {
           document.write("<tr>");
           for (var y = 1; y <= x; y++) {
               document.write("<td>" + x + "*" + y + "=" + x * y + "</td>");
           }
           document.write("</tr>");
       }
    document.write("</table>");
</script>

这里写图片描述

<body>
<script>
    for(var i=5;i>0;i--){
        var msg=" ";
        for(var j=1;j<=i;j++){
            msg=msg+"  *  "
        }
            document.write("<p align='center'>"+msg+"</p>");

    }
</script>
</body>

运行结果：这里写图片描述
输出100以内7的倍数

<body>
<script>
    var i;
    for(i=1;i<=100;i++){
       if (i%7==0){
           document.write(i+"<br>");
       }
    }
</script>

while和do while区别：
while先判断后执行语句，
do while 会先执行语句，再判断
当条件不成立时，while语句停止循环，do while 至少会运行一遍程序
continue 退出当前一轮循环
break 直接跳出循环
12.parseInt() 强制转换为整型
parseFloat() 强制转换为浮点型
Number() 转换为数字
String() 转换为字符串
Boolean() 转换为布尔型

<script>
    var x=123;
    console.log(typeof(x));
    var y=Number(x);
    console.log(typeof(y));
    var a="true";
    z=Boolean(a);
    console.log(typeof(z));
    var m=String(x);
    console.log(typeof(m));
    var one=[1,2,3];
    console.log(one.constructor);
    var two={a:1,b:2};
    console.log(two.constructor);
</script>

13.找对象： (通过ID，通过class，通过标签名)
var obj=document.getElementById()
1、获取值： innerHTML,innerText,value
obj.innerHTML //获取值
obj.innerHTML=值 //赋值
2、改变样式
obj.style.样式名=样式值； //样式名为驼峰式写法
3、改变属性
obj.属性名=属性值

<body>
<input type="text" class="username"/>
<script>
    var input=document.getElementsByClassName("username")[0];
    input.onchange=function(){
        this.style.backgroundColor="yellow";
    }
</script>

这里写图片描述
14.事件：
onmouseover 鼠标移上去时触发
onmouseout 鼠标离开时触发
onmousedown 鼠标按下
onmouseup 鼠标松开
onchange 表单内容发生改变时触发
onfocus 获取焦点
onblur 失去焦点

<body>
<img src="img/pic_bulboff.gif" alt=""/>
<script>
    var img=document.getElementsByTagName("img")[0];
    img.onmousedown=function(){
        this.src="img/pic_bulbon.gif";
    };
    img.onmouseup=function(){
        this.src="img/pic_bulboff.gif";
    }
</script>
</body>

这里写图片描述鼠标单击时：

<body>
<p><input type="text" class="username"/></p>
<p><input type="submit"/></p>
<script>
    var user=document.getElementsByClassName("username")[0];
    user.onfocus=function(){
        this.style.border="solid 1px red";
    };
    user.onblur=function(){
        this.style.border="solid 1px blue";
    };
</script>
</body>

结果：获得焦点后边框为红色，失去焦点后边框为蓝色

<body>
<p>姓名:<input type="text" class="username" value="请输入"/></p>
<p>性别:<select class="sex">
    <option value="男" selected>男</option>
    <option value="女">女</option>
    </select>
</p>
<div class="two"></div>
<div class="one">点击事件</div>
<script>
    var user=document.getElementsByClassName("username")[0];
    user.onfocus=function(){
        document.getElementsByClassName("two")[0].innerHTML="您已获得焦点"
    };
    user.onblur=function(){
        document.getElementsByClassName("two")[0].innerHTML="您已失去焦点"
    };
    var sex=document.getElementsByClassName("sex")[0];
    sex.onchange=function(){
        document.getElementsByClassName("two")[0].innerHTML="您选择的性别是:"+sex.value;
    };
    document.getElementsByClassName("one")[0].onclick=function(){
        if(this.innerHTML=="点击事件"){
            this.innerHTML="再点击一次"
        }else if(this.innerHTML=="再点击一次"){
            this.innerHTML="欢迎使用"
        }else if(this.innerHTML=="欢迎使用"){
            this.innerHTML="谢谢配合"
        }else if(this.innerHTML=="谢谢配合") {
            this.innerHTML = "再见"
        }else{
            this.style.display="none";
        }
    }
</script>
</body>

点击事件，点击点击五次后消失
这里写图片描述

<div class="box">
    <span onmouseover="change('pink')">Pink</span>
    <span onmouseover="change('yellowgreen')">Yellowgreen</span>
    <span onmouseover="change('greenyellow')">Greenyellow</span>
    <span onmouseover="change('blue')">Blue</span>
</div>
<script>
    function change(color){
    document.getElementsByClassName("box")[0].style.backgroundColor=color;
    }
</script>

鼠标放在绿色上时的结果：
这里写图片描述

<body>
<p>
    <a href="" data-color="skyblue">蓝色</a>
    <a href="" data-color="yellowgreen">绿色</a>
    <a href="" data-color="pink">粉色</a>
</p>
<script>
    var newa=document.getElementsByTagName("a");
    for(var i=0;i<newa.length;i++){
        newa[i].onmouseover=function(){
            document.bgColor=this.getAttribute("data-color");
        }
    }
</script>
</body>

鼠标放在绿色上时的结果：
这里写图片描述
15.获取属性值：
obj.getAttribute(“属性名”)
设置属性值：
obj.setAttribute(“属性名”，“新的属性值”)
访问对象的属性：
语法：对象名.属性名
访问对象的方法
16.Number对象

1、toString()方法
.toString() 转换进制 // obj.toString(16) /.toString(8) /.toString(2)
2、Infinity 无穷大
3、obj.toFixed(n) //保留小数位数 n是大于0的整数 n表示小数位数个数

<script>
    var x=123.45678;
    y= x.toFixed(2);
    console.log(y);
</script>

输出结果：123.46
验证码

<body>
<p>
    <input type="text"/><span></span>
</p>
<script>
    function yzm(){
        var one,two,three,four;
        one=Math.floor((Math.random()*10));
        two=Math.floor((Math.random()*10));
        three=Math.floor((Math.random()*10));
        four=Math.floor((Math.random()*10));
        var msg=one+" "+two+" "+three+" "+four;
        document.getElementsByTagName("span")[0].innerText=msg;
        document.getElementsByTagName("span")[0].style.backgroundImage="url('img/yz"+one+".jpg')";
    }
    yzm();
    var aspan=document.getElementsByTagName("span")[0];
    aspan.onclick=yzm;
</script>
</body>