JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计

JavaScript 专栏收录该内容
11 篇文章 0 订阅

 

登陆界面设计

撸代码之前先来看一看效果图:

登陆界面由一个简单的表单(头像、用户名、密码、登陆按钮、记住我、取消、忘记密码),创建了一个CSS3的缩放效果构成。需要做浏览器(Firefox、Safari and Chrome、Opera)兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。

 

代码实现

HTML 页面布局:需引入下文的 JavaScript 脚本和 CSS 修饰

<body>
<!--此元素被显示-->
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">登录</button>
<div id="id01" class="modal">
	<form class="modal-content animate" action="">
		<div class="imgcontainer">
		 <!--此元素不会被显示-->
		  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
		  <img src="" alt="Avatar" class="avatar">
		</div>

		<div class="container">
		  <label><b>Username</b></label>
		  <input type="text" placeholder="Enter Username" name="uname" required>	

		  <label><b>Password</b></label>
		  <input type="password" placeholder="Enter Password" name="psw" required>

		  <button type="submit">登陆</button>
		  <input type="checkbox" checked="checked"> 记住我
		</div>

		<div class="container" style="background-color:#f1f1f1">
		  <button type="button" onClick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
		  <span class="psw">Forgot<a href="#">Password?</a></span>
		</div>
	</form>
</div>
</body>

JavaScript 脚本:通过 onclick 事件控制登陆模型的显示和关闭。event.target 可以理解为点击事件的聚焦点。

<script type = "text/javascript">
// 获取模型
var modal = document.getElementById('id01');
// 鼠标点击模型外区域关闭登录框
window.onclick = function(event) {
    if (event.target == modal) {
        // 此元素不会被显示
        modal.style.display = "none";
    }
} 
</script>

CSS 修饰:

  • 文本输入框通过 input[type=text], input[type=password] 统一控制
  • cursor: pointer 光标呈现为指示链接的指针(一只手),cursor 控制贯标样式
  • border-radius: 50%  以百分比定义圆角的形状
  • position: fixed;  z-index: 1;  left: 0;  top: 0;   position、z-index、left、top共同控制模型在所有内容的上方(堆叠顺序1上方,-1下方)
  • @keyframes animatezoom  创建动画 animatezoom
  • @-webkit-keyframes animatezoom  设置动画兼容-webkit-引擎浏览器 Firefox
  • @-moz-keyframes animatezoom  设置动画兼容-moz-引擎浏览器 Safari and Chrome
  • @-o-keyframes animatezoom  设置动画兼容-o-引擎浏览器 Opera
  • -webkit-animation: animatezoom 0.6s  把动画添加到修饰器中并兼容设置
@charset "utf-8";
/* CSS Document */

/* 宽屏输入字段 */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* 为所有按钮设置样式 */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer; /*光标呈现为指示链接的指针(一只手)*/
    width: 100%;
}

button:hover {
    opacity: 0.8; /*设置 div 元素的不透明级别*/
}

/* 取消按钮的其他样式 */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* 将图像居中 */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

/*控制图片形状*/
img.avatar {
    width: 40%;
    border-radius: 50%; /*以百分比定义圆角的形状*/
}

/* 定位关闭按钮 */
.close {
    position: absolute; /*生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。*/
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

/* 光标移动到关闭按钮 */
.close:hover,
.close:focus {
    color: red;
	/*光标呈现为指示链接的指针(一只手)*/
    cursor: pointer; 
}

.container {
    padding: 16px;
}

/* 忘记密码 */
span.psw {
    float: right;
    padding-top: 16px;
}

/* 登陆弹框模型 */
.modal {
    display: none; /* 默认隐藏模型 */
    position: fixed; /* 生成绝对定位的元素,相对于浏览器窗口进行定位。 */
	/* z-index、left、top共同控制模型在所有内容的上方 */
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* 如果需要,启用滚动条 */
    background-color: rgb(0,0,0); /* 回退颜色 */
    background-color: rgba(0,0,0,0.4); /* 黑色 */
    padding-top: 60px;
}

/* 模型内容 */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 30%; /* Could be more or less, depending on screen size */
}

/* 添加缩放动画 */
.animate {
	
    -webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/
	-moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/
	-o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/
    animation: animatezoom 0.6s
}

/*
1. transform:scale(x,y)
x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

2. 关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
*/

/*创建动画animatezoom,把它绑定到 animate 选择器*/
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* 设置动画兼容-webkit-引擎浏览器 Firefox */
@-webkit-keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/
@-moz-keyframes animatezoom {
	from {transform: scale(0)} 
    to {transform: scale(1)}
}

/*设置动画兼容-o-引擎浏览器 Opera*/
@-o-keyframes animatezoom {
	from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* 
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
这里,如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改span和cancel按钮的样式 */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

 

  • @media screen and (max-width: 300px) :@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改span和cancel按钮的样式。

注意:

 1. transform:scale(x,y)

     x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。

     Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

2. 关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。

 

注册界面设计

撸码之前先来看一下效果图:

注册界面由一个简单的表单(Email、用户名、密码、重复密码、注册按钮、记住我、取消),创建了一个CSS3的缩放效果构成。同样需要做浏览器(Firefox、Safari and Chrome、Opera)兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。

 

代码实现

HTML 页面布局:同样需引入下文的 JavaScript 脚本和 CSS 修饰

<body>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">注册</button>
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  <form class="modal-content animate" action="">
    <div class="container">
      <label><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required>

      <label><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <label><b>Repeat Password</b></label>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
      <input type="checkbox" checked="checked"> Remember me
      <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>
</div>
</body>

JavaScript 脚本:通过 onclick 事件控制登陆模型的显示和关闭。event.target 可以理解为点击事件的聚焦点。

<script type="text/javascript">
    // 获取模型
    var modal = document.getElementById('id01');

    // 鼠标点击模型外区域关闭登录框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

CSS 修饰:同登陆类似,文本输入框的统一控制、浏览器兼容处理、简单响应式的设计

@charset "utf-8";
/* CSS Document */

/* 宽屏输入字段 */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* 为所有按钮设置样式  */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* 取消按钮的其他样式 */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}

/* 浮动取消和注册按钮,并添加一个相同的宽度 */
.cancelbtn,.signupbtn {float:left;width:50%}

/* 向容器元素添加填充 */
.container {
    padding: 16px;
}

/* 注册弹框模型 */
.modal {
    display: none; /* 在默认情况下隐藏 */
    position: fixed; /* 生成绝对定位的元素,相对于浏览器窗口进行定位。 */
	/* z-index、left、top共同控制模型在所有内容的上方 */
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* 如果需要,启用滚动条 */
  	background-color: rgb(0,0,0); /* 回退颜色 */
    background-color: rgba(0,0,0,0.4); /* 黑色 */
    padding-top: 60px;
}

/* 模型内容 */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
}

/* 定位关闭按钮 */
.close {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #000;
    font-size: 40px;
    font-weight: bold;
}

/* 光标移动到关闭按钮 */
.close:hover,
.close:focus {
    color: red;
	/*光标呈现为指示链接的指针(一只手)*/
    cursor: pointer; 
}

/* 设置浮动*/
.clearfix::after {
    content: "";
    clear: both;
    display: table; /*此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。*/
}

/* 添加缩放动画 */
.animate {
	
    -webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/
	-moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/
	-o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/
    animation: animatezoom 0.6s
}

/*
1. transform:scale(x,y)
x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

2. 关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
*/

/*创建动画animatezoom,把它绑定到 animate 选择器*/
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* 设置动画兼容-webkit-引擎浏览器 Firefox */
@-webkit-keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/
@-moz-keyframes animatezoom {
	from {transform: scale(0)} 
    to {transform: scale(1)}
}

/*设置动画兼容-o-引擎浏览器 Opera*/
@-o-keyframes animatezoom {
	from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* 
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
这里,如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改取消和注册按钮的样式 */
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}
  • @media screen and (max-width: 300px):如果文档宽度小于 300 像素则操作修改,在额外的小屏幕上更改取消和注册按钮的样式 。

 

这里通过 JavaScript + CSS/CSS3 + HTML 简单的解释网页登陆 + 注册的界面设计,只是用于新手学习入门,还有很多的功能添加、异常处理等问题需要解决。在运用到项目中时可以根据业务进行拓展完善。

 

评论4
请先登录 后发表评论~
目录 -------------------------------------------------------------------------------- 第1章 javascript概述 1 1.1 什么是脚本语言 2 1.2 javascript简介 2 1.3 javascriptjava的关系 3 1.4 javascript的基本构成 4 1.4.1 基本数据类型 4 1.4.2 变量 4 1.4.3 常量 5 1.4.4 表达式 6 1.4.5 运算符 6 1.5 javascript的基本语法 10 1.5.1 if条件选择语句 10 1.5.2 switch选择语句 11 1.5.3 do&hellip;while语句 12 1.5.4 while循环语句 13 1.5.5 for循环语句 14 1.5.6 break语句与continue语句 15 1.6 javascript的函数调用 16 1.6.1 函数的定义与调用 17 1.6.2 全局变量与局部变量 17 1.6.3 可变参数的函数 17 1.6.4 预定义函数 17 1.7 javascript的对象 19 1.7.1 对象的基本概述 19 1.7.2 对象属性 19 1.7.3 创建对象 20 1.7.4 使用对象 22 1.7.5 其他内部对象 24 1.8 小结 26 第2章 javascript中事件. 窗口和框架的处理 27 2.1 事件处理的基本概念 28 2.2 常用事件及处理 28 2.2.1 浏览器事件 29 2.2.2 鼠标事件 29 2.2.3 文本框事件 30 2.2.4 其他事件 31 2.3 什么是框架 31 2.4 使用框架 32 2.5 小结 32 第3章 链接类特效 33 3.1 按时消失的链接 34 3.2 带滚动提示的链接 36 3.3 动态变换的链接 37 3.4 滚动链接 38 3.5 不断闪动的链接 39 3.6 在按钮上定时显示不同的链接 40 3.7 带链接的滚动字幕 42 3.8 单击链接显示菜单 43 3.9 鼠标右键链接 44 3.10 显示当前页的所有链接 45 3.11 查看网址源代码 46 3.12 将站点加入收藏夹 47 3.13 单击按钮返回默认主页 47 3.14 给指定的人员发信 48 3.15 弹出菜单式链接 49 3.16 图片选择器 50 3.17 链接导航框 51 3.18 小球跟踪链接 52 3.19 单击按钮打开全屏窗口 56 3.20 单选按钮选择链接 56 3.21 隐藏的链接 57 3.22 变换链接颜色 58 3.23 固定链接的位置 59 第4章 时间类特效 61 4.1 时间的水中倒影 62 4.2 简单的日历 63 4.3 带有农历的日历 65 4.4 标题栏显示日期 68 4.5 标题栏显示时间 69 4.6 不同时间的不同问候 69 4.7 记录进入网站的时间 70 4.8 页面的最后更新日期 71 4.9 节日倒计时 72 4.10 定时打开指定页面 72 4.11 显示在背景上的时钟 73 4.12 动态显示访问时间 75 4.13 在指定时间内保存页面 76 4.14 离今天最近的两个星期天 78 4.15 记录在网站停留的时间 79 4.16 带开关的时钟 80 4.17 每天显示一条不同的信息 81 4.18 模拟时钟 82 4.19 英文式的文本时钟 84 4.20 关闭页面时弹出时间警告框 85 4.21 显示在按钮上的时间 86 4.22 计算出生时间 88 4.23 计算几天后将是什么日期 92 第5章 鼠标类特效 95 5.1 让鼠标悬停来开关窗口 96 5.2 鼠标的十字星准星 96 5.3 鼠标的文字跟踪 97 5.4 鼠标经过时改变文本颜色 99 5.5 鼠标驱动图片变化 100 5.6 鼠标悬停时背景色改变 101 5.7 鼠标右键弹出对话框 102 5.8 鼠标的图片旋转跟踪 103 5.9 旋转的鼠标光环 105 5.10 跟随鼠标旋转的文字 107 5.11 单击鼠标右键打开网站 109 5.12 跟着鼠标的烟花 109 5.13 跟随鼠标的时钟 111 5.14 屏蔽鼠标右键 115 5.15 跟随鼠标的滚动字幕 116 5.16 鼠标悬停打开新的页面 117 5.17 鼠标的指针踪迹效果 118 5.18 跟随鼠标跳动的星星 119 5.19 冒水泡的鼠标 121 5.20 跟随鼠标的幻影文字 123 5.21 非图片鼠标跟踪 124 5.22 自动变化的鼠标指针 127 5.23 跟随鼠标的流星 128 第6章 图片类特效 133 6.1 鼠标控制图片的明暗效果 134 6.2 来回摆动的图片 134 6.3 随意飘动的图像 136 6.4 随意走动的图片 137 6.5 图片的水中倒影效果 140 6.6 可以随意拖动的图片 140 6.7 “雷达”扫描图片效果 142 6.8 图片的变形效果 143 6.9 会抖动的图片 144 6.10 不停闪烁的图片 146 6.11 图片分割显示 146 6.12 图片穿行页面效果 148 6.13 自由移动的图片 149 6.14 图片代替按钮效果 150 6.15 图片的翻转效果 151 6.16 向外扩展的图片 152 6.17 鼠标悬停改变图片 153 6.18 图片模糊效果 155 6.19 图片的探照灯效果 156 6.20 跟随屏幕移动的图片 157 6.21 图片的模糊显示 158 6.22 图片的渐隐渐现 159 6.23 一堆开放的花朵 160 第7章 文字类特效 165 7.1 闪烁的按钮文字 166 7.2 逐个显示的变色文字.. 167 7.3 垂直滚动的文字 168 7.4 文字的渐隐渐显的效果 169 7.5 文字跳动的效果 170 7.6 状态栏的打字效果 172 7.7 文字的逐条显示 172 7.8 文字的旋转效果 174 7.9 文字的心跳效果 175 7.10 文字在文本框中坠落 176 7.11 文字飞舞的效果 178 7.12 横向移动的跑马灯 181 7.13 可随便移动的文字 182 7.14 水波形的文字 183 7.15 首字母大小写的变化 184 7.16 状态栏文字飞出效果 186 7.17 链接文字的滚动效果 188 7.18 不停变色的文字 189 7.19 文字颜色变化的显示效果 190 7.20 选中文本框中的全部文字 192 7.21 按钮上的滚动文字 193 7.22 从天而降的文字 194 7.23 鼠标悬停显示提示文字 200 第8章 页面类特效 203 8.1 下雨的页面效果 204 8.2 网页中的loading条 206 8.3 页面的制作完成时间 207 8.4 在状态栏显示输入字符的页面 208 8.5 页面的加密功能 209 8.6 调色板更换页面背景 211 8.7 滚动信息公告页面 213 8.8 页面背景的颜色变化 215 8.9 页面背景的随机显示 216 8.10 单击按钮打印当前页面 217 8.11 记录用户的来访次数 218 8.12 可选择的页面信息 219 8.13 文本框消失的页面 220 8.14 随机播放背景音乐的页面 221 8.15 能自动滚屏的页面 222 8.16 密码保护页面 223 8.17 检测ie所装插件的页面 224 8.18 页面向右滚屏 225 8.19 渐渐消失的页面 226 8.20 按钮锁定页面 226 8.21 在线改变背景颜色 227 8.22 雪花纷飞的页面 228 8.23 页面直接显示 230 第9章 窗口类特效 233 9.1 按指定要求打开的窗口 234 9.2 控制窗口的打开和关闭 235 9.3 从天而降的窗口 235 9.4 打开慢慢变大的窗口 236 9.5 打开一个四面变大的窗口 237 9.6 定时打开新的窗口 238 9.7 转动出现的窗口 239 9.8 自动弹出的窗口 241 9.9 自动消失的广告窗口 242 9.10 窗口的震动效果 243 9.11 同时打开10个窗口 244 9.12 检测系统信息窗口 245 9.13 测试链接速度的窗口 248 9.14 关闭窗口打开收藏夹 250 9.15 关闭窗口打开指定地址 250 9.16 显示载入时间的窗口 251 9.17 显示浏览器信息的窗口 252 9.18 显示访客登录信息的窗口 253 9.19 标题渐变的窗口 255 9.20 绝对全屏打开链接网页 257 9.21 打开一个频道窗口 258 9.22 在页面中打开窗口 258 9.23 自动滚动的窗口 259 第10章 其他特效 261 10.1 显示下载进度 262 10.2 打开或关闭隐藏层 263 10.3 打字速度测试 264 10.4 改变图片提示背景颜色 266 10.5 渐变色表格 269 10.6 列表内容相互转换 270 10.7 身体健康测试 273 10.8 网络知识测试 275 10.9 方框线上的闪耀效果 278 10.10 自动隐藏的菜单 281 10.11 自动收缩的菜单 283 10.12 爆炸式菜单链接 285 10.13 显示边框的菜单 287 10.14 右键菜单链接 289 10.15 首页导航菜单 291 10.16 ftp登录页面 292 10.17 html颜色代码表 293 10.18 计算平面上两点之间的距离 294 10.19 测试点击速度 295 10.20 元素周期表 297 10.21 计算器 299 10.22 自信测试 302 10.23 滚动交换链接 304 第11章 javascript与activex技术 311 11.1 activex组件 312 11.1.1 什么是activex组件 312 11.1.2 activex的内容 312 11.1.3 activex控制和internet 312 11.2 activex组件的应用 313 11.2.1 网页中的flash对象 313 11.2.2 flash对象的调用 314 11.3 asp与activex组件 315 11.4 asp与javascript语言 315 11.4.1 脚本语言 316 11.4.2 设置脚本语言 316 11.4.3 服务器端的脚本 316 11.4.4 javascript和vbscript的区别 317 11.5 asp与表单处理 317 11.5.1 form数据集合 317 11.5.2 form集合的提交方式 318 11.6 小结 319 第12章 javascript中的数据库调用 321 12.1 数据库的构建 322 12.2 数据库查询语句 323 12.2.1 sql数据库 323 12.2.2 asp中的sql语句 323 12.3 数据库的连接 324 12.3.1 odbc的dsn连接方法 324 12.3.2 odbc的直接连接方法 325 12.3.3 ole db的连接方法 325 12.4 数据库的查询 325 12.4.1 使用connection对象查询数据库 326 12.4.2 使用recordset对象查询数据库 327 12.5 使用javascript访问数据库 330 12.6 小结 331 第13章 综合实例 333 13.1 勇闯迷宫 334 13.2 记忆力游戏 338 13.3 贪吃蛇游戏 342 13.4 打蜜蜂 345 13.5 射击游戏 350 13.6 螃蟹赛跑 353 13.7 数字拼图 358 13.8 填格子游戏 363 13.9 棒球动画 367 13.10 礼花动画 372
©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

Mr.Piglet

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值