Day6 Project1 - 履历

补充一点HTML的资讯，HTML从1995年至今已经发展了多个版本，目前主流使用为HTML5，每个版本都会有基本的格式让浏览器能判断程序的版本，以HTML5为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

前几日已经将HTML、CSS、JavaScript做过基本的介绍了，我认为此时最适合做的第一个作品就是个人履历了，我会撰写履历的地方有两个。

1.104
2.CakeResume

尤其CakeResume的排版方式蛮友善的，可以多利用Chrome的工具当作参考多练习。

首先先创建一个资料夹专门放今天要使用的资料

├── day6
│   ├── cow.jpg
│   ├── day6.css
│   ├── day6.html
│   └── day6.js

接着开始编辑HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="day6.css">
    <script src="day6.js"></script>
    <title>My resume</title>
</head>
<body>
    <div class="container">
        <!-- 个人资料 -->
        <div> 
            <h1>About me</h1>
            <ul>
                <li><img src="cow.jpg" width="10%" class="img-circle"></li>
                <li>品种：松阪牛</li>
                <li>来自：擎天岗</li>
                <li>信箱：[email protected]</li>
            </ul>
        </div>
        <!-- 技能 -->
        <div>
            <h1>Skills</h1>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </div>
        <!-- 经历 -->
        <div>
            <h1>Experience</h1>
            <ul>
                <li><a href="https://ithelp.ithome.com.tw/articles/10258879">Day1</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10259383">Day2</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10259712">Day3</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10260164">Day4</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10260531">Day5</a></li>
            </ul>

        </div>
        <!-- 作品 -->
        <div>
            <h1>Project</h1>
            <ul>
                <li>比大小</li>
                <div>
                    <label id='home'>主队的点数:</label>
                    <label id="away">客队的点数:</label>
                    <label onclick="key()">点我开始比赛</label>
                </div>
            </ul>
        </div>
    </div>
</body>
</html>

JavaScript

function key(dom) {
    let home = Math.floor(Math.random() * 10);
    let away = Math.floor(Math.random() * 10);
    
    document.getElementsByClassName('home')[0].textContent = '主队点数：' + home;
    document.getElementsByClassName('away')[0].textContent = '客队点数：' + away;

    setTimeout(function () {
        if (home > away) {
            alert('主队获胜')
        } else if (home < away) {
            alert('客队获胜')
        } else {
            alert('两队平手')
        }
    }, 100);
}

今天的写到一半没有存档关掉再写一次就到这边结束了，谢谢观看的各位，请记得按赞分享开启小铃铛，你的支持会让按赞数+1。

<<: DAY4-JAVA的选择性叙述与回圈

>>: #6 - Module Patterns