JavaScript案例1：云顶英雄拿牌必要性

最新推荐文章于 2024-05-22 13:52:22 发布

蟹老板12138

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量69

点赞数

分类专栏：基础练习文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_63469637/article/details/129155612

版权

基础练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.效果图

2.知识点

HTML骨架、CSS标签以及JS的运算符和类型转换

h1 标题标签

table>tr>th表单标签

居中边框合并边框

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>
        <style>
            body{
                background-color: aquamarine;
            }
                h1{
                text-align: center;
            }

        table{
            border-collapse: collapse;
            height: 88px;
            width: 520px;
            margin: 0 auto;
        }

        table,tr,th{
            
            border: solid 3px;
        }

    </style>
</head>
    <body>
    <script>
        // 1.输入英雄属性
        let fight = +prompt('请输入对应英雄攻击力')
        let fire = +prompt('请输入对应英雄法术强度')
        let star = +prompt('请输入对应英雄星级')
        let friend = prompt('羁绊')

        // 2.计算拿牌必要性
        let necess = fight + fire + 2*star

        // 3.页面打印渲染
        document.write(`
        <h1>英雄战力统计表</h1>
        <table>
        <tr>
            <th>英雄角色</th>
            <th>攻击力</th>
            <th>法术强度</th>
            <th>星级</th>
            <th>羁绊</th>
            <th>拿牌必要性</th>
        </tr>
        <tr>
            <th>塔姆</th>
            <th>${fight}</th>
            <th>${fire}</th>
            <th>${star}</th>
            <th>${friend}<d/th>
            <th>${necess}</th>
        </tr>
        </table>    
        `)


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