JavaScript 基础代码练习

最新推荐文章于 2024-04-14 14:00:27 发布

_sunShine女孩

最新推荐文章于 2024-04-14 14:00:27 发布

阅读量467

点赞数 2

分类专栏：前端文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/MYgirlHHH/article/details/121826066

版权

JS学习ing

换背景1

<h2>
    背景color换换换
</h2>
<body id = "admin" style = "background-color: rgb(248, 246, 242)">
<script language = "javascript">
    function change_color(color_index) {
   
        var a = document.getElementById("admin");
        if(a == null) return;
        else {
   
            switch(color_index) {
   
                case 1: a.style.background = "#666666";break;
                case 2: a.style.background = "#ccccff";break;
                case 3: a.style.background = "#71bd7e";break;
                default: a.style.background = "white";break;
            }
        }
    }
</script>
<div style="width: 100px; height: 20px; text-align: center; 
    background-color: #666666;" οnclick="return change_color(1)">
</div>
<div style="width: 100px; height: 20px; text-align: center; 
    background-color: #ccccff;" οnclick="return change_color(2)">
</div>
<div style="width: 100px; height: 20px; text-align: center; 
    background-color: #71bd7e;" οnclick="return change_color(3)">
</div>
</body>

换背景2

<body id="back"> // 更换背景图片
    <button>换肤</button>
    <script>
        let btn = document.querySelector('button');
        let back = document.getElementById('back');
        let flag = 1;
        btn.onmouseover = function () {
   
            back.style.background = 'no-repeat center url(imag/back' + flag +'.jpg)';
            flag ++;
            if(flag > 2) flag = 1; // 两张背景切换，可设置多张背景切换
        }
        btn.onclick = function () {
   
            btn.style.display = 'none'; // 隐藏按钮，刷新显示
        }
    </script>
</body>

换背景3

<style>
    .bodyBackground {
   
        background: no-repeat center url(imag/back1.jpg); /*默认背景1为background*/
    }
    .back img{
   
        height: 50px;
        width: 100px;
    }
</style>
<body id="back" class="bodyBackground">
    <ul class="back">
        <img src = "imag/back1.jpg">
        <img src="imag/back2.jpg">
    </ul>
    <script>
        let imgs = document.querySelector(".back").querySelectorAll("img"); // 图片伪数组化
        let backGround = document.getElementById("back"); // 用于更换背景图片路径
        for(let i = 0; i < imgs.length; i++) {
   
            imgs[i].onclick = function () {
   
                backGround.style.background = 'no-repeat center url('+ this.src +')';
            }
        }
    </script>
</body>

异常处理

// 抛出异常, 进行处理（try-catch-finally）
<script language = "javascript">
    try {
   
        var fu = new Array("张三", "李四", "王五");
        m++; // 未定义变量，人为异常抛出
        for(n in fu) document.write(fu[n] + " ");
    }
    catch(e) {
   
        alert((e.number&0xFFFF) + " 号 错误: " + e.description);
    } // 0 + 数字 为八进制，0x + （0~9 a~f）为十六进制
    finally {
   
        fu = null;
        alert("fu = " + fu + " 断开数组引用!");
    }
</script>

创建对象

<script> // 用new Object创建对象（具体事物）
    var obj = new Object();
    obj.uname = ' ';
    obj.age = 0;
    obj.fun = function() {
   
        document.write("hello javascript!");
    }
    document.write(obj.age + "<br>");
    obj.fun();
</script>

<script> // 构造函数创建对象（类似class，泛指某一大类）
    function Hero(uname, utype, ublood) {
   
        this.name = uname;
        this.type = utype;
        this.blood = ublood;
        this.attack = function (udo) {
   
            document.write(" ");
        }
    }
    var obj = new Hero(' ', ' ', 0);
    document.write(obj.name + "<br>");
    document.write(obj.type + "<br>");
    document.write(obj.blood + "<br>");
    obj.attack(' ');
</script>

鼠标移动变换字体颜色

<head> // 鼠标移动，变换字体颜色
<style>
    div {
   
        height: 50px;
        width: 50px;
        color: cornflowerblue;
    }
</style>
</head>
<body>
    <div>首页</div>
<script> 
    var div = document.querySelector('div'); //  1. 获取事件源
    div.onmouseover = function() {
    // 2. 绑定事件类型 
        div.style.color = "green";
        // 3. 添加事件处理程序
    }
    div.onmouseout = function() {
   
        div.style.color = "cornflowerblue";
    }
</script>
</body>

登录注册

<style> /*  登录注册  */
    .box {
   
        position: relative;
        width: 400px;
        top: 10px;
        height: 400px;
        border-bottom: 1px solid rgb(177, 175, 179);
        margin: 100px auto;
        background-color: aliceblue;
    }
    .box input {
   
        width: 400px;
        height: 30px;
        right: 10px;
        border: 0;
        outline-color: rgb(98, 125, 199);