JavaScript·基础
关注
分享
扫一扫
小梦新靓
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
javaScript做的管道小鸟游戏
文章目录一、功能二、实现步骤三、代码一、功能小鸟飞行（背景图像动）小鸟碰到游戏上下边界，游戏结束小鸟碰到管子游戏结束二、实现步骤1、实现背景图片移动，图片平铺，这样移动就不会没有图片1.1）实现方式，定时器移动背景图片的x轴的定位2、实现小鸟上下移动2.1）定时器控制向下运动，这个不控制会一直向下运动2.2）点击事件来控制向上运动，，点击一次向上运动一次2.3）小鸟的位置来判断用来停止运动，利用全局变量runing的布尔值来判断3、管道创建3.1）创建创建管道的函数，每次创建原创 2020-12-24 11:15:46 · 2340 阅读 · 2 评论 -
迷你微信案例
文章目录一、功能二、代码一、功能思路分析：1)点击图片实现用户切换功能1-1：默认两个用户，通过点击来回切换2）点击发送按钮，八用户得聊天内容展示聊天区域2-1、点击发送按钮，把聊天内容展示在聊天区域2-2、设定聊天在领土区域内不同位置显示二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微信聊天界面</tit原创 2020-12-23 22:09:44 · 430 阅读 · 1 评论 -
javascript贪吃蛇游戏
文章目录一、项目介绍二、代码一、项目介绍功能：（1）、开始界面点击开始，进入游戏界面（2）、按上下左右键来控制食物运动得方向（3）、控制一次以后方向确定蛇会一直游动（4）、食物随机产生（5）、当蛇头和食物碰撞后食物位置变动，蛇身加长，游戏分数加1（6）、蛇头碰到墙壁或者自己游戏结束，按确认后游戏重新开始二、代码html<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2020-12-23 22:04:52 · 346 阅读 · 0 评论 -
五大位置offset,client,scroll,screen,page
文章目录一、偏移量offset二、client鼠标距离(不含边框)（获取边框的宽度）三、scroll四、page(文档坐标)这个当文档没有滑动条时候和client一样五、screen显示屏前言凡是事件中含有x和y的都是为了获取鼠标指针位置相对于触发事件的对象的位置，但是又各不相同一、偏移量offset//获取坐标节点.offsetLeft;节点.offsetTop;获取节点的大小节点.offsetWidth;（一个盒子的所有边框 内边距和内容）节点.ofsetHeight；事件.off原创 2020-12-22 13:03:13 · 543 阅读 · 0 评论 -
案例点击弹出登录页面并拖拽
功能：（1）、点击弹出对话框有遮盖曾（2）、关闭登录页面（3）、页面可用拖拽代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0px; margin: 0px; .原创 2020-12-21 13:40:42 · 314 阅读 · 0 评论 -
DOM操作动态创建删除元素
文章目录一、创建节点1.1、createElement创建1.2、document.write()1.3、element.innerHTML=‘’1.4、性能二、插入节点2.1、最后插入appendChild2.2、参考前插入一个节点insertBefore2.3、强调三、删除节点removeChild四、复制节点（克隆节点）4.1、直接获取4.2、替换节点replaceChild(新的节点，旧的节点)五、设置节点的属性5.1、获取节点属性5.2 用方法二、getAttribute（）5.3、设置属性5.4原创 2020-12-17 14:05:09 · 1154 阅读 · 0 评论 -
DOM的动态创建和删除元素
文章目录一、创建节点1.1、createElement创建1.2、document.write()1.3、element.innerHTML=‘’二、插入节点2.1、最后插入appendChild2.2、参考前插入一个节点insertBefore2.3、强调三、删除节点removeChild四、复制节点（克隆节点）4.1、直接获取五、设置节点的属性5.1、获取节点属性5.2 用方法二、getAttribute（）5.3、设置属性5.4、总结一、创建节点1.1、createElement创建（1）在内原创 2020-12-17 12:17:33 · 912 阅读 · 0 评论 -
DOM属性和样式的操作
文章目录一、innerHTML和innerText二、nodeType属性:节点类型三、nodeType，nodeName，nodeValue四、文档加载五、行内样式设置六、读取元素的样式七、style属性的注意事项八、style的常用属性九、例子9.1、改变div的大小和透明度9.2、当前输入的文本框高亮显示9.3、高级隔行变色，高亮显示十、通过js获取当前显示的样式一、innerHTML和innerText节点.innerHTML：双闭合标签里面的内容（包含标签）节点. innerText：不包原创 2020-12-17 09:41:47 · 736 阅读 · 0 评论 -
DOM操作来注册事件以及事件概念
文章目录一、事件简介二、事件的三要素三、步骤四、常用事件五、步骤详解5.1、获取事件源的方法（DOM节点的获取）5.2、绑定事件的方式5.3、事件驱动程序5.3.1、obload事件六、例子一、事件简介事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。二、事件的三要素事件源 事件 事件驱动程序例如：比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：原创 2020-12-17 09:28:00 · 422 阅读 · 0 评论 -
DOM中的节点获取方法总结
文章目录一、元素节点的获取二、DOM访问关系的获取2.1、获取父节点节点.pareNode（获取的式元素节点）2.2、获取兄弟节点2.2.1、.nextElementSibling || 节点.nextSibiling2.2.2获取前一个节点 previousSibiling/ 前一个元素节点previousElementSibiling2.2.3、获取任意一个兄弟节点.parentNode.children[index]2.3、获取单个的子节点2.3.1、第一个子节点firstChild | 第一个原创 2020-12-17 09:23:20 · 5167 阅读 · 0 评论 -
变量，函数，函数表达式提升
文章目录一、全局变量的时候二、在局部变量的时候三、函数表达式和函数声明3.1、当函数表达式和函数一样的情况四、总结一、全局变量的时候规则(1)、在执行前提取script里面的所有全局变量，但是只是声明，不赋值（2）、提升function,函数的提升是直接将整个函数整体提升到作用域的最开始位置，相当于剪切过去的样子（3）明提升到它所在作用域的顶端去执行，到我们代码所在的位置来赋值。<script> console.log(num1); console.log(f原创 2020-12-13 11:03:12 · 379 阅读 · 0 评论 -
JavaScript的+号
情况一：字符串+数字当加号的两边，只要有一个是字符串的时候，就会调用 String() 函数将数字转为字符串，然后再计算。导致最终的运算结果是字符串。情况二：Boolean+数字Boolean 型和数字型相加时， true 按 1 来算 ，false 按 0 来算。这里其实是先调 Number() 函数，将 Boolean 类型转换为 Number类型，然后再和 数字相加。情况三：null+数字等价于 0+数字情况四：undefined+数字计算结果：NaN...原创 2020-12-09 14:13:34 · 666 阅读 · 0 评论 -
JavaScript变量之间转换，以及隐式转换
文章目录一.类型转换分为二 其他的简单类型转化为String2.1 隐式类型转换:字符串拼接2.2.调用toString()方法2.3.强制转换使用String()函数三.其他的数据类型转化为Number(重要)3.1.Number()函数3.1.1.字符串转数字3.1.2.布尔转为数字3.1.3.null转数字3.1.4.undefined转为数字3.2.parseInt()函数:字符串---数字3.2.1 字符串--数字总结Number() 函数和 parseInt() 函数的区别：3.2.2.pars原创 2020-12-09 14:09:40 · 689 阅读 · 0 评论 -
JavaScript里面的自增和自减问题
一、自增自减1.1、自增 ++a,a++(自减同理)(1),原变量不管是先增还是后增，都会使得原变量增/减1var a=10,b=10;a++;++b;alert(a);//11alert(b);//11(2)不同的是,在赋值的时候使用a++这个表达式是把a的赋值给表达式，然后再自己自增++a是先自己自增，自增后再赋值给表达式<script> var a=10,b=10; c=a++; d=++b; alert(c);//10 a原创 2020-12-09 14:02:36 · 1057 阅读 · 0 评论