Java复习打卡day37

最新推荐文章于 2024-08-21 14:09:37 发布

weixin_51630304

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量146

点赞数

文章标签：字符串 js javascript

本文链接：https://blog.csdn.net/weixin_51630304/article/details/116204913

版权

Java复习打卡day37

1.javascript的对象定义及使用
2.javascript内置对象-Array数组
3.JavaScript内置对象-基本包装类型
4.javascript内置对象-Date日期
5.javascript内置对象-String字符串
6.javascript内置对象-Math对像
7.JavaScript内置对象-单击事件与元素标签操作
8.JavaScript中的Timing定时事件
9.JavaScript实现简单计算器实例
10.JavaScript简单操作元素标签实例

1.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>JavaScript对象的定义与使用</title>
</head>
<body>
    
</body>
<script>
    //1.直接定义对象
    var obj = new Object();
    obj.name = "zhangsan"
    obj.age = 17;
    obj.say = function(){//添加功能（函数或方法）
        console.log(this.name+":"+this.age);
    }
    obj.say();
    //2.通过工厂模式定义
    function CreateObj(name , age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.say = function(){//添加功能（函数或方法）
            console.log(this.name+ ":"+ this.age);
        }
        return obj;
    }
    //测试
    var obj1 = CreateObj('zhangsanfeng', 149);
    obj1.say();
    //3.自定义构造函数创建对象
    function Stu(uname, uage){
        this.name = uname;
        this.age = uage;
        this.say = function(){
            console.log(this.name +":"+this.age);
        }
    }
    //测试
    var s1 = new Stu('zhaoyun ',49);
    var s2 = new Stu('guanyunchang ',149);
    s1.say();
    s2.say();
    //4.直接创建自定义对象
    var obj ={name:'zhangsan ',age:26}
    console.log(obj.name)
    console.log(obj.age)

    var ob = {}
    ob.name = "zhangsan ";
    ob.age = 24;
    ob.say = function(){
        console.log('我叫：'+ this.name+'我今年'+this.age+'岁了。')
    }
    ob.say();
</script>
</html>

2.javascript内置对象-Array数组

<!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>JavaScript的内置对象-Array</title>
</head>
<script>
    //1.数组定义方式
    var a = new Array();//定义空数组
    var b = new Array(10);//定义指定长度的数组
    var c = new Array(11,12,13);//定义指定元素的数组
    
    var d = [1,2,3,4,5]//快捷定义数组
    //2.数组的遍历方式
    for(var i = 0; i<d.length;i++){
        console.log(d[i]);
    }

    for(i in d){
        console.log(d[i]);
    }

    d.forEach(function(v){
        console.log(v);
    });
    //3.数组的方法
    console.log(d.toString())//toString 将数组转化为字符串形式，返回
    console.log(d.join(':'))//join 用传入的字符连接各数。
    var aa = [1,2,3];
    console.log(aa.concat(4,5));

    var bb = [1,2,3,4,2,5,6];
    console.log(bb.join(':'))
    console.log(bb.sort().join(':'))
    console.log(bb.reverse().join(':'))

    var aa = new Array(1,2,3);
    console.log(aa.join(":"))
    aa.push(4)//从数组的最上面加上一个数
    aa.push(5)
    console.log(aa.join(":"))//1:2:3:4:5
    aa.pop();//从数组的最上面减去一个数
    console.log(aa.join(":"))//1:2:3:4

    //数组的清空
    console.log(bb.join(':'))
    bb.length = 3;
    console.log(bb.join(":"))//输出为6:5:4
    bb = [];
    console.log(bb.join(':'))//输出为空
</script>
<body>
    
</body>     
</html>

3.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>javascript--内置对象</title>
</head>
<script>
    var a = "zhangsan ";
    console.log(a.substring(2,5))
    //等价于

    var a = new String('zhangsan ')
    console.log(a.substring(2,5))

    var num = 12.356;
    console.log(num)
    var num = new Number(12.356)
    console.log(num.toFixed(2))//保留几位小数
</script>
<body>
    
</body>
</html>

4.javascript内置对象-Date日期

<!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>javascript--内置对象</title>
</head>
<script>
    //内置对象--Date 对象
    function formatDate(dd){
        if(!dd instanceof Date){
            return;
        }
        var y = dd.getFullYear(),
            m = dd.getMonth()+1,
            d = dd.getDate(),
            hh = dd.getHours(),
            mm = dd.getMinutes(),
            ss = dd.getSeconds();
            //实现单位数字的补零操作
            hh = hh<10?'0'+hh:hh
            mm = mm<10?'0'+mm:mm
            ss = ss<10?'0'+ss:ss
            return y+'-'+m+'-'+d+'-'+' '+hh+':'+mm+':'+ss;
    }
    var dd = new Date();
    //时间戳指的是从1970年1月1日0时0分0秒至今的毫秒数
    document.write('时间戳：'+dd.valueOf());

    document.write('<h2>'+formatDate(dd)+'</h2>')


</script>
<body>
    
</body>
</html>

5.javascript内置对象-String字符串

<!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>javascript--内置对象</title>
</head>
<script>
    var s1 = 'ZhangSanFeng';
    document.write(s1+'<br/>');
    document.write(s1[5]+'<br/>');
    document.write(s1.charAt(5)+'<br/>');
    document.write(s1.substr(5,3)+'<br/>');
    document.write(s1.substring(5,8)+'<br/>');
    document.write('大写：'+s1.toUpperCase()+'<br/>');
    document.write('小写：'+s1.toLowerCase()+'<br/>');
    //字串查找
    document.write(s1.indexOf('an')+'<br/>');//返回2
    document.write(s1.lastIndexOf('an')+'<br/>');//返回6
    //替换
    document.write(s1.replace('SanFeng','wuJi')+'<br/>');
    //全部替换
    document.write('10,2,3,4'.replace(/,/g,':')+'<br/>')

    var str = '12:2:2:4:56:6:7';
    document.write(str+'<br/>');
    document.write(str.split(":")+'<br/>');//按指定的符号将字符串分解为数组。
    document.write(s1+'<br/>');

    var aa = " hello world! "
    document.write('#'+aa+'#'+'<br/>');
    document.write('#'+aa.trim()+'#'+'<br/>');//trim 可以将字符串首尾的空格剪掉
</script>
<body>
    
</body>
</html>

6.javascript内置对象-Math对像

<!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>javascript--内置对象</title>
</head>
<script>
    //内置对象--Math
    document.write(Math.abs(-10)+'<br/>')
    document.write(Math.ceil(10.00000001)+'<br/>')//进一取整
    document.write(Math.floor(9.99999999)+'<br/>')//舍一取整
    document.write(Math.round(4.5555)+'<br/>')//四舍五入取整
    document.write(Math.max(1,2,3)+'<br/>')//最大值
    document.write(Math.min(1,2)+'<br/>')//最小值

    document.write(Math.random()+'<br/>')//0~1之间的随机数
    document.write(Math.ceil(Math.random()*1000000)%101+300+'<br/>')//300~400之间的随机数
</script>
<body>
    
</body>
</html>

7.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>javascript--单击事件</title>
</head>
<body>
    <h2 id="aa">JavaScript语言实例--单击事件</h2>
    <button onclick="fun()">点击我</button>
    <ul id="uid">
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
    <ol id="oid">
        <li>aaaaaa</li>
        <li>bbbbbb</li>
    </ol>
</body>
<script>
    function fun(){
        //通过id 获取标签
        var hid = document.getElementById('aa');
        console.log(hid);
        //替换标签内容
        hid.innerHTML='JavaScript语言实例--单击事件！！';
        //改变标签内的样式
        hid.style.color='red';
        hid.style.backgroundColor = '#ddd'; 
    }

    //获取当前网页中ID为‘uid’标签下所有的li标签
    var m = document.getElementById('uid').getElementsByTagName('li');
    //遍历
    for(var i in m){
        console.log(m[i].innerHTML);
        m[i].style.color = 'red';
    }
</script>
</html>

8.JavaScript中的Timing定时事件

<!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>
    <h2>javascript -- 定时器</h2>
    <h2 id="hid">计数器：0</h2>
    <button onclick="DoStop()">停止</button>
</body>
<script>
    var m = 0,mytime = null;
    function Do(){
        m++;
        document.getElementById('hid').innerHTML = '计时器'+m;
        mytime = setTimeout(Do, 1000);
    }
    Do();
    function DoStop(){
        clearTimeout(mytime);
    }
</script>
</html>

9.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>
</head>
<body>
    <h2>JavaScript语言实例--简单计算器</h2>
    <form action="" name="myform" method="GET">
        数值1:<input type='text' name="num1" size="10px"/><br/><br/>
        数值1:<input type="text" name="num2" size="10px"/><br/><br/>
        结果:<input type="text" name="res" readonly style="border: 0px;" size="10px"><br/><br/>
        <input type="button" onclick="doFun(1)" value="加">
        <input type="button" onclick="doFun(2)" value="减">
        <input type="button" onclick="doFun(3)" value="乘">
        <input type="button" onclick="doFun(4)" value="除">
    </form>
</body>
<script>
    function doFun(c){
        //想接收传入的两个数值
        n1 = parseInt(document.myform.num1.value);
        n2 = parseInt(document.myform.num2.value);
        var res;
        switch(c){
            case 1:res = n1+'+'+n2+'='+(n1+n2);
                break;
            case 2:res = n1+'-'+n2+'='+(n1-n2);
                break;
            case 3:res = n1+'*'+n2+'='+(n1*n2);
                break;
            case 4:res = n1+'/'+n2+'='+(n1/n2);
                break;
        }
        //将计算的结果赋值给第三个框
        document.myform.res.value = res;
    }
</script>
</html>

10.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>
</head>
<body>
    <h2>javascript--放大缩小和隐藏</h2>
    <button onclick="doFun(1)">放大</button>
    <button onclick="doFun(2)">缩小</button>
    <button onclick="doFun(3)">隐藏</button>
    <br/><br/>
    <div style="border: 1px;height: 300px;width: 200px;background-color: aqua;" id="dd"></div>
</body>
<script>
    var width=200,height=300;
    var hid = document.getElementById('dd');
    //注意这两行一定不能写在函数里面，否则每次点击按钮将重新获取他们的值。
    function doFun(c){
        switch(c){
            case 1:
                width+=10;
                height+=10;
                hid.style.width = width+'px';
                hid.style.height = height+'px';
                break;
            case 2:
                width-=10;
                height-=10;
                hid.style.width = width+'px';
                hid.style.height = height+'px';
                break;
            case 3:
                hid.style.display = 'none';
                break;
        }
    }
</script>
</html>

weixin_51630304

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java复习打卡day37

Java复习打卡day371.javascript的对象定义及使用2.javascript内置对象-Array数组3.JavaScript内置对象-基本包装类型4.javascript内置对象-Date日期5.javascript内置对象-String字符串6.javascript内置对象-Math对像7.JavaScript内置对象-单击事件与元素标签操作8.JavaScript中的Timing定时事件9.JavaScript实现简单计算器实例10.JavaScript简单操作元素标签实例1.javas
复制链接

扫一扫