web作业--99乘法表+数组遍历求最大值+秒数+数据打印

最新推荐文章于 2024-05-16 19:01:40 发布

password大鸭梨

最新推荐文章于 2024-05-16 19:01:40 发布

阅读量183

点赞数

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/m0_73163437/article/details/131990383

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文展示了几个使用JavaScript编写的HTML页面示例，包括生成1.99乘法表，遍历数组求最大值，将秒数转换为小时、分钟和秒的格式，以及遍历并打印包含学生信息的对象数组。这些例子涉及基础的前端编程概念和技术。

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

1.99乘法表

<!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>
    <style>
        span{
            display: inline-block;
            width: 60px;
            height: 30px;
            margin: 10px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <script>
        for(let i=1;i<=9;i++){
            for(let j=1;j<=i;j++){
                document.write(`<span>${j}*${i}=${i * j}</span>`)
                
            }
            document.write(`<br>`)
        }
    </script>
</body>
</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>Document</title>
</head>
<body>
    <script>
        let a=[2,1,33,22,56,43,44]
        let i,max=a[0]
        for(i=1;i<7;i++){
            if(a[i]>max){
                max=a[i]
            }
        }
        document.write(max)
    </script>
</body>
</html>
<!-- 5.数组2.1.33.22.56.43.44遍历求最大值 -->

3.秒数

<!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>
    <script>
        let a=+prompt('请输入秒数:')
        // 弹出框：输入相应值
        function getTime(a){
            // 函数
            h = parseInt(a/60/60%24)
            m = parseInt(a/60%60)
            s = parseInt(a%60)
            
            h = h<10 ? '0'+ h : h
            m = m<10 ? '0'+ m : m
            s = s<10 ? '0'+ s : s
            // 不足两位数补零

            console.log(h,m,s)
            // 在console中反映出数值：可验证代码或者结果是否正确
            return`${h}小时${m}分钟${s}秒`
            // 返回值
        }
        let str = getTime(a)
        // str=函数a中的返回值
        document.write(str)
        // 在浏览器中打印str

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

4.数据打印

<!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>
    <style>
        span{
            width: 10px;
            height: 10px;
            background-color: aqua;
            margin: 10px;
        }
    </style>
</head>
<body>
    <script>
        let stu=[
            {name:'小明',age:18,gender:'男',hometown:'河北省'},
            {name:'小红',age:19,gender:'女',hometown:'河南省'},
            {name:'小刚',age:17,gender:'男',hometown:'山西省'},
            {name:'小丽',age:18,gender:'女',hometown:'山东省'}
        ]
        // 对象遍历

        for(let i=0;i<stu.length;i++){
            for(let k in stu[i]){
                console.log(k)
                document.write(`<span>${k}</span>`)
                // 对象名
                console.log(stu[i][k])
                document.write(`<span>${stu[i][k]}</span>`)
                // 属性名             
            }
            document.write(`<br>`)
        }
    </script>
</body>
</html>