0基础学习js

最新推荐文章于 2024-07-14 12:36:02 发布

倚栏听风&

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量113

点赞数

文章标签： html5 css html javascript

本文链接：https://blog.csdn.net/lyx021855/article/details/115912706

版权

这是手写的选色游戏

0基础学习js第一天

0基础学习js第一天


```html
<!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>
        ul {
            padding: 0;
            box-sizing: border-box;
            width: 500px;
            height: 700px;
            border: 2px solid #000;
            text-align: center;
            position: relative;
            ;
        }

        li {
            width: 90px;
            height: 50px;
            font-size: 70px;
            list-style: none;
            display: inline-block;
            cursor: pointer;
        }

        #bigg {
            font-size: 220px;
            font-weight: 100;
        }

        .c11 {
            color: yellow;
        }

        .c22 {
            color: purple;
        }

        .c33 {
            color: green;
        }

        .c44 {
            color: red;
        }

        .c55 {
            color: blue;
        }
        span{
            font-size: 50px;
            float: right;
            font-weight: 900px;
        }
        i{
            font-size: 40px;
            float: left;
            font-weight: 900px;
        }
    </style>
</head>

<body>
    <ul>
        <i>倒计时：</i><i id="DJS">25</i><i>秒</i>
        <span id="score">0</span><span>得分：</span>
        <h1 class="big" id='bigg'>蓝</h1>
        <li class="c33" id="c1">黄</li>
        <li class="c11" id="c2">紫</li>
        <li class="c55" id="c3">绿</li>
        <li class="c22" id="c4">红</li>
        <li class="c44" id="c5">蓝</li>
    </ul>
</body>
<script src="../js/myfunction.js"></script>
<script>
    var color = ['黄', '紫', '绿', '红', '蓝'];
    var class1 = ['c11', 'c22', 'c33', 'c44', 'c55'];
    var count = 0;
    window.onload = function () {
        document.getElementById('bigg').className = class1[randomNum(0, 4)];
        bigg.innerHTML = color[randomNum(0, 4)];
    }
    var cz = document.getElementsByTagName('li');
    for (var cc of cz) {
        cc.onclick = function () {
            var a = document.getElementById('bigg').className;
            var b = color[class1.indexOf(a)];
            var c = this.innerHTML;
            if (b == c) {
                bigg.innerHTML = color[randomNum(0, 4)];
                document.getElementById('bigg').className = class1[randomNum(0, 4)];
                count++;
                score.innerHTML = count;
            } else {
                alert('不好意思你输了' + '\n' + '你的得分为' + count);
                score.innerHTML = count;
            }
        }
    }
</script>

</html>

以上是全部代码 有不懂可以问哦！！
不定期更新好玩的代码片段

倚栏听风&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0基础学习js

这是手写的选色游戏0基础学习js第一天0基础学习js第一天```html<!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, in
复制链接

扫一扫