代码手写
文章平均质量分 57
代码手写
贪吃ღ大魔王
深耕于技术写博,致力于前端开发。
展开
-
手把手教学弟用js写的打砖块游戏,学弟乐哉~ 附(思路注释+源码)
打砖块游戏demo游戏试玩:????思路详解:????创建地图板块,上半部分是放置砖块盒子,砖块选择动态创建;底部放置小球和滑块;设置他们相应的样式根据brickBox大小,规定砖块大小,计算砖块数量,根据砖块数量动态创建滑块跟随鼠标进行移动滑块点击事件,小球移动。检测小球碰撞。源码附注释见末尾 ????布局创建: ????地图container放置砖块的板块brickBox小球ball,滑块slider实现效果:动态创建砖块: ????定义砖原创 2021-06-22 10:55:05 · 1844 阅读 · 258 评论 -
我用端午假期写了个贪吃蛇,学弟玩的不亦乐乎!附(思路注释+源码)
学弟玩法:(蚯蚓找妈)我的玩法:(王母摇头)模块化开发为什么要用面向对象写,有三大特性:封装、继承、多态。为什么要封装 : 实现模块化开发,封装为一个块一个块的,利于维护,有某个模块出现bug只用修改这个模块,其他模块不受影响。在工作中,开发速度快,同时开发模块。分三个模块写:地图,食物,蛇。蛇模块分为:定义蛇、蛇移动、蛇死亡、蛇吃食物、蛇移动方向、蛇显示。地图模块:创建地图板块,设置样式function Map() { // 创建一个div thi原创 2021-06-12 15:22:30 · 5235 阅读 · 243 评论 -
面向对象ajax函数的封装
面向对象ajax函数的封装1 提取参数,进行穿递2 找到get和post异同点一样的地方公用 不一样的区别处理 class axios { static get(url, data, cb) { axios.http('get', url, data, cb); } static post(url, data, cb) { axios.http('post原创 2021-05-18 21:47:38 · 173 阅读 · 3 评论 -
淘宝式轮播图切换太快BUG
项目场景:淘宝式轮播图问题描述:手动切换太快,或者设置定时间时间太短,切换都会出现的跳转BUG,BUG源码:JS: class swiper { constructor() { this.ullis = this.$('ul li', true); this.ul = this.$('ul'); this.ol = this.$('ol');原创 2021-05-14 19:07:56 · 489 阅读 · 1 评论 -
div随机烟花效果Debug
项目场景:div随机烟花效果问题描述:调用删除div方法 remove(),this指向问题bug源码如下: js:<script> class fire { constructor() { // 获取父节点 设置调用点击事件 this.con = document.getElementById('container'); this.con.on原创 2021-05-13 19:30:35 · 182 阅读 · 4 评论 -
js动画透明度Debug
项目场景:js动画透明度问题描述:鼠标移动box区opacity向1渐变正常,鼠标移出box区发生闪烁现象。当鼠标移入时,正常:当鼠标移出时,闪烁bug:以下是bug源码:js: var box = document.querySelector('div'); var timer; var timers; var num = 0.3; var num1 = 1; b原创 2021-05-12 13:10:14 · 136 阅读 · 4 评论 -
全选反选框bug
项目场景:全选框反选问题描述:在测试过程中发现,依次将每个li选中后,全选框自动选中,但是在对全选框进行取消选中时,需要多点一下取消。可能是因为个人代码问题,具体代码例如下:js: var price = document.getElementById('j_cbAll'); var ipts = document.querySelectorAll('#j_tb input'); var but = document.querySelector('#btn')原创 2021-05-11 19:39:41 · 167 阅读 · 1 评论 -
JavaScript编程基础练习题---干货分享
文章目录一、js的基本类型1. 为抵抗洪水,战士连续作战89个小时,编辑计算共多少天零多少小时?2. 小明要到美国旅游,可是那里的温度是以华氏度为单位记录的,他需要一个程序将华氏度温度(80度)转换为摄氏度,并以华氏度和摄氏度为单位分别显示该温度。(提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32) 保留3位小数)3. 705、816用js代码计算两个数字的个位、十位、百位相加的和二、逻辑分支、基础语句等1.输入一个月份返回这个月有多少天2.输入一个年份/月份/日期返回这个日期是这一原创 2021-04-23 21:12:21 · 7564 阅读 · 26 评论 -
实际开发案例应用---分享
文章目录一、节点新浪下拉菜单二、伪京东密码明文显示三、表格隔行高亮效果四、总结一、节点新浪下拉菜单实现代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ lis原创 2021-04-23 08:41:36 · 249 阅读 · 5 评论 -
教你用纯JS实现二级菜单
js点击出现二级菜单,点击二级菜单主菜单换成二级菜单点击出现二级菜单 <style>*{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red;原创 2021-04-22 17:11:49 · 2337 阅读 · 6 评论 -
天使跟随鼠标&&输入框放大提示文本内容&&键盘聚焦搜索框---案例分享
文章目录天使跟随鼠标案例输入框放大提示文本内容键盘聚焦搜索框天使跟随鼠标案例实现核心思路:鼠标不断的移动,使用鼠标移动时间:mousemove在页面中移动,给document注册事件图片要移动距离,而且不占位置,我们使用绝对定位即可核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个X和Y坐标作为图片的left和top值就可以移动图片实现代码: <style type="text/css"> body{ position: relative; b原创 2021-04-21 18:58:22 · 282 阅读 · 8 评论 -
留言和删除留言案例&&动态表格生成案例----分享
评论留言和删除留言案例&&动态表格生成案例----分享评论留言和删除留言案例评论留言 核心思路1,点击按钮之后,就动态创建一个li,添加到ul里面。2,创建 li 的同时,把文本域里面的值通过 li.innerHtml 赋值给 li 。3,如果想要新的留言后面显示就用appendChild 如果想要留言在前面显示就用insertBefore。删除评论 核心思路1,当我们把文本域里面的值赋值给 li 的时候, 多添加一个删除的链接2,需要把所有的链接获取过来,当我们点击原创 2021-04-20 20:29:53 · 200 阅读 · 8 评论 -
tab切换栏原理--应用实际网站开发 手写代码案例
tab切换栏原理–应用实际网站开发 手写代码案例tab栏切换在网页开发中非常常见,是前端开发的必需学会的案例,一些tab栏切换和商品信息分栏切换等:实现代码: <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } ul { margin: 50px auto; } .box { w原创 2021-04-20 10:41:01 · 385 阅读 · 1 评论 -
js中let和var定义变量的区别
js中let和var定义变量的区别let和var的区别:声明后未赋值,表现相同使用未声明的变量,表现不同重复声明同一个变量时,表现不同变量作用范围,表现不同原创 2021-04-19 10:56:11 · 129 阅读 · 0 评论 -
通过DOM简单实现文字的上下轮播滚动效果
jquery 文字上下轮播滚动效果通过DOM简单实现文字的上下轮播滚动效果以下是纯手打的代码:html<div class="contentNotice"> <ul> <li><img src="../img/notice.png" alt=""></li> <li> <div class="scrollDiv" id="s1">原创 2021-04-18 16:22:34 · 298 阅读 · 3 评论