学习js第二周

最新推荐文章于 2024-08-20 15:49:45 发布
最新推荐文章于 2024-08-20 15:49:45 发布
阅读量78 收藏
点赞数 1
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54382144/article/details/120481645
版权

锅打灰太狼上下的部分代码

html代码部分

<head>

        <meta charset="utf-8">

        <title>锅打灰太狼</title>

        <link rel="stylesheet" type="text/css" href="./css/day01.css"/>

    </head>

    <body>

        <div class="boss">

            <!-- 第一层开始游戏 -->

            <div class="box1">

                <p>锅打灰太狼</p>

                <button type="button">开始游戏</button>

                <div class="clearfix box1_img">

                    <img class="box1_img1" src="./img/x5.png" alt="">

                    <img class="box1_img2" src="./img/h6.png" alt="">

                </div>

            </div>

            <!-- 第二层锅打灰太狼界面 -->

            <div class="box2">

                <!-- <img class="box1_img1" src="./img/h0.png" alt=""> -->

            </div>

            <!-- 第三层再来一次 -->

            <div class="box3">

                第三层再来一次

            </div>

        </div>

    </body>

    <script type="text/javascript" src="./js/day01.js"></script>

js部分

// html加载完成后再加载js

window.onload = function(){

    // 获取第一个界面

    var box1 = document.querySelector(".box1");

    // 获取第二个界面

    var box2 = document.querySelector(".box2");

    // 获取第三个界面

    var box3 = document.querySelector(".box3");

    // 获取开始游戏按钮

    var start = document.querySelector(".box1 button");

    

    var htlImg = document.createElement("img");

    htlImg.style.position = "absolute";

    htlImg.style.top = "160px";

    htlImg.style.left = "17px";

    box2.appendChild(htlImg);

    

    var htlNum = 0;

    //灰太狼上升动画

    function htlTop(){

        var dsqHtlTop = setInterval(function(){

            htlNum++;

            if(htlNum==5){

                clearInterval(dsqHtlTop);

                htlDow();

            }

            htlImg.src = "./img/h"+htlNum+".png";

            console.log(htlNum);

        },120);

    }

    //灰太狼下降动画

    function htlDow(){

        var dsqHtlDow = setInterval(function(){

            htlNum--;

            if(htlNum==0){

                clearInterval(dsqHtlDow);

                box2.removeChild(htlImg);

            }

            htlImg.src = "./img/h"+htlNum+".png";

            console.log(htlNum);

        },100);

    }

    // 开始游戏

    start.onclick = function(){

        box1.style.display="none";

        box2.style.display="block";

        box3.style.display="none"，

        htlTop();

    }

}

css部分

* {

    margin: 0;

    padding: 0;

}

.clearfix::after {

    content: "";

    display: block;

    overflow: hidden;

    clear: both;

    height: 0;

}

.clearfix{

    zoom: 1;

}

a {

    text-decoration: none;

}

ul li {

/* 清除默认样式 */

    list-style: none;

}

.boss {

/* 定义父亲*/

    width: 320px;

    height: 480px;

    margin: 0 auto;/* 水平居中*/

}

.box1 {

    width: 100%;

    height: 100%;

    background: #00b0ff;

    border-radius: 10px;

    overflow: hidden;

}

.box1 p {

    color: #ffa600;

    font-size: 40px;

    font-weight: 700;

    text-align: center;

    margin-top: 120px;

}

.box1 button {

    width: 180px;

    height: 50px;

    background: red;

    font-size: 30px;

    font-weight: 700;

    color: #fff;

    border-radius: 10px;

    border: none;

    margin: 50px auto;

    display: block;

}

.box1_img {

    margin-top: 105px;

}

.box1_img1 {

    float: left;

    margin-left: 20px;

}

.box1_img2 {

    float: right;

    margin-right: 20px;

}

.box2,.box3 {

    display: none;/* 为了显示功能*/

}

.box2 {

    width: 100%;

    height: 100%;

    background: url(../img/game_bg.jpg);/* 图片地址*/

    position: relative;/* 相对定位*/

}

无辜小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript-4-学习：Epicodus代码审查项目，Javascript第4周：跟踪学习目标
01-30
学习-Javascript第4周这是一个自我反省的项目，目的是确定我们作为编码员的优缺点，并制定针对这些弱点的计划。霍莉·威尔卡利斯（Holly Wilkalis）描述在列出了我的优点和缺点之后，很明显，我对准备进行技术面试...
JS-Week-2:第 2 周结束作业
06-20
在JavaScript的世界里，第二周的学习通常会涉及到许多关键概念，为初学者建立坚实的基础。本周的作业可能旨在深化对变量、数据类型、操作符、控制流以及函数的理解。以下是这些核心概念的详细解释： 1. **变量...
第二周学习JS总结
a2311772099的博客
09-22 182
学习内容总结 Js-document对象 Js-window对象 js内容差不多已经全部学习完毕，但是还很不熟练
js基础学习--第二周
ccy16633406778的博客
03-21 1202
js学习第二周,由于疫情影响,并没有上完整周便开始停课,只能将这些总结送给大家 数组 概念 数组就是一系列有序数据的集合 数组也是一个对象 数组中每个值,称为一个数组元素 和普通对象不同的是,数组使用数字来作为 索引操作元素 数组元素可以是任意类型的数据 创建数组 使用new关键字 var arr = new Array(5) 创建一个长度...
JavaScript学习第二周
pe11223的博客
12-09 127
JS学习第二周
JS基础学习（第二周）
wandongle的博客
12-24 419
这一周主要学习了DOM,同时掌握了一些简单的js方法改变HTML的内容、改变css、或者使网页对dom事件做出反应。
js第二周学习总结
lmjlmjlmj04的博客
03-05 67
js知识
网页设计第二周PPT学习教案.pptx
10-01
... 1. **封闭类型标记**：如 `倾斜文本</i>`，标记成对出现，包围需要处理的...学习和理解这些基本的HTML标记是网页设计的起点，随着深入，还可以涉及到CSS（层叠样式表）和JavaScript，以实现更复杂的样式和交互功能。
Vanilla-JS：学习Vanilla JS 2周:winking_face:
02-15
**第二周：进阶JavaScript** 1. **事件处理**：理解事件和事件监听器的工作原理，例如点击（click）、改变（change）等事件，以及如何使用事件委托提升性能。 2. **闭包**：了解闭包的概念，它是JavaScript中一个...
week2CodingAssignment:JavaScript第2周编码分配简介
03-31
JavaScript是Web开发中不可或缺的一部分，尤其对于前端开发者来说，它是一种强大的、动态的编程语言，用于实现网页的交互性。在“week2CodingAssignment”中，我们将会深入学习...祝你在第二周的学习中取得丰硕成果！
使用css如何获取最后一行的元素？使用css解决双边框问题
希文Gershwin
08-20 575
我只要知道最后一行中有哪几个元素，然后给最后一行的元素设置就行了但是只能获取到最后一个元素需要知道一排要有几个元素才行。
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 92
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
CSS有趣知识
weixin_42376775的博客
08-20 91
5.分开写：border-top-ldft-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。2.如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角、右下角、左下角。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。3.如果是个矩形，设置为高度的一半就可以做。
3：html（CSS)：基础语法3
2301_76578848的博客
08-17 469
在这篇文章中，介绍了网页布局与id的内容，从而将网页更加美观，越来越贴近大家平时看到的网页了。当然现在的网页离成功还是有很大的路要走。
【速览】CSS（更新中）
椰子的职场成长记录
08-20 216
每个 HTML 元素都被视为一个盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。CSS 中的媒体查询（Media Queries）可以根据设备的特性应用不同的样式。CSS 中的样式可以层叠和继承。CSS 提供了多种布局方式，包括浮动（float）、定位（position）、Flexbox、Grid 等。CSS 可以控制文本的样式，包括字体、大小、颜色、行高、对齐方式等。CSS 可以设置元素的背景颜色、背景图像、边框样式、颜色和宽度等。
深入探索CSS的:unresolved伪类：选择未解析元素的神秘面纱
2401_85702623的博客
08-17 686
伪类是CSS的一个选择器，用于选择那些尚未解析的元素。在Web开发中，我们可能会遇到一些元素，它们依赖于外部资源或异步加载的内容，这些元素在加载过程中可能还没有完全解析。使用伪类，我们可以为这些元素定义特定的样式，直到它们完全解析并显示在页面上。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 862
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
vue 动态设置每个tab的颜色scss
最新发布
qq_32555123的博客
08-20 122
vue设置动态tab样式和颜色
【VUE3】uni-app集成animation.css，按钮触发公共方法，无需绑定样式变量
applebomb的专栏
08-17 304
animation是个好东西，实现了一些常用的方法。最近集成到uni-app中，发现网上的通常都是使用绑定变量的方式来实现。少了通过指定ref触发的模式，总感觉有那么别扭。撸了一上午代码，把这个功能实现了出来。
Web开发基础：六周学习之旅
第二周，课程进入HTML（HyperText Markup Language）的基础学习，包括HTML的语法、元素和标签、属性及其值，以及HTML文档的整体结构。这部分内容是构建网页内容的基础，学生将学会如何编写结构化的网页。 第三周，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值