![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js练习题
奋斗中的切图猿
选择了前方,便要不顾风雨兼程
展开
-
练习-数据的切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-10-01 17:49:53 · 97 阅读 · 0 评论 -
练习-字符串操作与正则表达式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-08-07 00:34:38 · 96 阅读 · 0 评论 -
练习-带有惯性的小球运动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-08-03 23:46:05 · 264 阅读 · 0 评论 -
练习-用键盘控制元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-08-03 18:27:02 · 74 阅读 · 0 评论 -
练习-下拉框(冒泡问题)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-07-30 22:16:47 · 120 阅读 · 0 评论 -
练习-滚动条的使用(拖拽——模拟滚动条)
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #wrap{原创 2020-07-30 13:06:14 · 156 阅读 · 0 评论 -
练习-元素拖拽过程中的碰撞检测
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit原创 2020-07-29 23:56:35 · 143 阅读 · 0 评论 -
练习-自制滚动条
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit原创 2020-07-29 21:34:02 · 139 阅读 · 0 评论 -
练习-保存所有生成的彩票
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-07-27 15:32:02 · 94 阅读 · 0 评论 -
练习-带有数量限制的多选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-07-23 21:11:39 · 105 阅读 · 0 评论 -
练习-九九乘法表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-07-17 23:49:03 · 99 阅读 · 0 评论 -
练习-元素的排序
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl原创 2020-07-17 09:27:44 · 91 阅读 · 0 评论 -
练习-带有删除的留言
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl原创 2020-07-16 16:26:16 · 52 阅读 · 0 评论 -
练习-随机彩票
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-06-14 17:38:40 · 271 阅读 · 0 评论 -
练习-查找关键字
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span{原创 2020-06-12 23:16:59 · 135 阅读 · 0 评论 -
练习-彩虹字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2020-06-12 22:10:26 · 158 阅读 · 0 评论 -
字符加密解密
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit原创 2020-06-12 12:25:16 · 139 阅读 · 0 评论 -
练习-字符传送特效
要求:将textarea中的文字一个一个的传到div中代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=原创 2020-06-12 12:00:40 · 162 阅读 · 0 评论 -
练习-字符在字符串中出现的次数和位置
效果:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t原创 2020-06-12 11:23:57 · 204 阅读 · 0 评论 -
绘制表盘
效果:代码:注意:代码中的js库用的是之前文章发过的myjs.js库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2020-05-17 11:49:53 · 424 阅读 · 0 评论 -
输出当前的时间(函数封装)
要求:用计时器把当前时间的时分秒每1秒钟在页面的p标签中展示一次时间格式(xx:xx:xx的格式),做出一个时钟效果,第一秒页面也要展示一次时间代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2020-05-14 12:34:20 · 443 阅读 · 0 评论 -
依次掉落的方块2
要求:在页面上布局平铺20个50X50红色的方块,点击我们的浏览器的窗口时让每个方块每隔200毫秒以每30毫秒7像素的速度掉下来一个,直到所有的方块掉到距离左边500,上边500的位置,并消失。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi原创 2020-05-13 18:08:27 · 146 阅读 · 0 评论 -
依次掉落的方块
要求:在页面上布局平铺20个50X50红色的方块,点击我们的浏览器的窗口时让每个方块每隔200毫秒以每30毫秒7像素的速度掉下来一个,直到所有的方块掉到500的位置代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-05-13 18:05:00 · 241 阅读 · 0 评论 -
延时消失的下拉框
结果:类似于扣扣上鼠标移入某人的头像,会展示详细内容效果,此时如果鼠标放在显示内容的界面上,它不会消失;如果鼠标从展示内容上离开后消失<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt原创 2020-05-11 22:41:02 · 219 阅读 · 0 评论 -
延时的弹窗
要求:页面刷新后,1.5秒显示div,点击关闭可以隐藏div,如果不点那么等待2秒后自动关闭代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C原创 2020-05-11 14:06:00 · 398 阅读 · 0 评论 -
游戏-猜数字
结果如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-05-09 13:42:03 · 225 阅读 · 0 评论 -
练习-商品数量和价格(用函数封装解决)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-04-28 22:17:03 · 456 阅读 · 0 评论 -
js练习-商品数量和价格(用一一对应解决)
实现结果:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2020-04-28 22:15:12 · 1012 阅读 · 0 评论