js的至死不渝

最新推荐文章于 2024-06-06 14:24:25 发布

mitara

最新推荐文章于 2024-06-06 14:24:25 发布

阅读量94

点赞数

分类专栏：被迫营业

本文链接：https://blog.csdn.net/mitara/article/details/117716795

版权

被迫营业专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了两个JavaScript实战项目：一是通过JS在页面加载后动态设置li元素的背景色，实现奇偶行颜色区分；二是利用JS创建一个简易计算器，实现了输入数字及选择运算符进行计算的功能，并确保输入值为数字。

摘要由CSDN通过智能技术生成

被迫营业的第6天

今日学内容：依旧是js的练习

1、页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

2、使用JS完成简易计算器（要求：输入的值只能是数字，onchange():值改变时执行事件 onblur():鼠标移出时执行事件）

练习1代码：

<!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>li展示效果</title>
</head>
<!-- <style>
    li:nth-child(even){
        background-color: aquamarine;
        }
    li:nth-child(odd){
        background-color: violet;
    }
</style> -->
<body onload="load()">
    <li>li+1</li>
    <li>li+2</li>
    <li>li+3</li>
    <li>li+4</li>
    <li>li+5</li>
    <li style="background-color:green">li+6</li>
</body>
<script type="text/javascript">
load=function(){
    let items = document.body.children;
    for(let i=0;i<6;i++){
        if(i%2){
            items[i].setAttribute('style','background-color:green;');
        }else{
            items[i].setAttribute('style','background-color:red');
        }
    }
}
</script>
</html>

练习2代码：

<!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>简易计算器</title>
</head>
<style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
</style>
<body>
    <div style="flex-direction: row;">
        <input id="one" onchange="ex01()" type="number">
        <select id="fu" onchange="ex01()">
            <option value="">请选择</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input id="tow" onchange="ex01()" type="number">
        <label>=</label>
        <input id="result" readonly="true" type="number">
    </div>
    <button style="margin-top: 20px;" onclick="ex01()"> 计算</button>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">


    ex01 = function () {
        let one = $("#one").val();
        let tow = $("#tow").val();
        let fu = $("#fu option:selected").val();
        
        one = parseInt(one);
        tow = parseInt(tow);

        let sum = 0;
        switch (fu) {
            case '+':
                sum =  one + tow;
                break;
            case '-':
                sum = one - tow;
                break;
            case '*':
                sum = one * tow;
                break;
            case '/':
                sum = one / tow;
                break;
        }
        $("#result").val(sum);
    }
</script>
</html>

mitara

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的至死不渝

被迫营业的第6天今日学内容：依旧是js的练习1、页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色2、使用JS完成简易计算器（要求：输入的值只能是数字，onchange():值改变时执行事件onblur():鼠标移出时执行事件...
复制链接

扫一扫