分类：JS

2020
09-24

javascript中innerHTML 获取或替换html内容的实现代码

 innerHTML属性用于获取或替换HTML元素的内容，语法为Object.innerHTML其中1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素；2.注意书写，innerHTML区分大小写。我们通过id="light"获取<div>元素，并将元素的内容输出和改变元素内容，代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>innerHTML属性</title></head><body><divid="cshi">你好，黑夜20200317</... 继续阅读 >
2020
09-24

基于JavaScript实现留言板功能

本文实例为大家分享了JavaScript实现留言板功能的具体代码，供大家参考，具体内容如下html代码<divid="main"class="main"><ulid="content"class="content"><liclass="msgContentleft">hello?</li><divstyle="clear:both;"></div><liclass="msgContentleft">hello</li><divstyle="clear:both;"></div><liclass="msgContentright">hi</li><divstyle="clear:both;"></div><liclas... 继续阅读 >
2020
09-24

JS实现简易留言板（节点操作）

JS实现简易留言板（节点操作） 本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下今天的案例主要是对节点进行操作创建节点、添加节点、删除节点以及为节点添加内容的操作。 就是一个简单的留言板功能，可以发布留言，删除留言。主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元... 继续阅读 >
2020
09-24

基于JavaScript实现贪吃蛇游戏

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下1.结构创建一个盒子box作为蛇的身体，当前盒子中只有一个子元素，代表此时蛇的长度为1.在创建一个盒子food作为贪吃蛇的食物。<divid="box"><div></div></div><divid="food"></div>2.CSS设置蛇和食物的样式，这里注意蛇和食物都是绝对定位。<style>*{padding:0px;margin:0px;}#boxdiv{width:30px;height:30px;box-sizing:... 继续阅读 >
2020
09-24

原生js实现的金山打字小游戏（实例代码详解）

原生js实现的金山打字小游戏（实例代码详解） 首先先来看一下效果图如果感兴趣的就来看一下Js源码吧//计分板varboard={dom:document.getElementById("score"),maxLost:3,//最大丢失量lost:0,//当前丢失了多少个score:0,//当前分数render:function(){//显示this.dom.innerHTML="<p>得分："+this.score+"</p><p>丢失："+this.lost+"/"+this.maxLost+"</p>";},//增加一个丢失数addLost:function(){if(this.lost===this.maxLos... 继续阅读 >
2020
09-24

JavaScript实现拖拽效果

JavaScript实现拖拽效果 要实现JavaScript的拖拽效果，首先我们需要知道事件对象几个有关于实现拖拽效果的坐标获取事件对象vare=e||window.event;根据需求需要用到的拖拽效果的坐标clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离)offsetX:鼠标点击位置相对于触发事件对象的水平距离offsetY:鼠标点击位置相对于触发事件对象的垂直距... 继续阅读 >
2020
09-24

js实现点赞效果

js实现点赞效果 javascript实现点赞或踩加一，再点一次减一的效果好多新手在网上找不到点赞效果的代码，今天给大家分享一个采用js写的简单方法（有点错误，已修正）效果图如下HTML代码可直接ctrl+c复制代码<divclass="dian"><divid="zan"><imgsrc="images/college_Likes_ic3.png"alt="很棒，赞一个"><divid="num1">30</div></div><divid="cai"><imgsrc="images/college_Likes_ic.png"alt="不行，踩一下"><divid="num2">30... 继续阅读 >
2020
09-24

JS手写一个自定义Promise操作示例

本文实例讲述了JS手写一个自定义Promise操作。分享给大家供大家参考，具体如下：经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise为了不与原生的Promise命名冲突，这里就简单命名为MyPromise.classMyPromise{constructor(executor){let_this=thisthis.state='pending'//当前状态this.value=undefined//存储成功的值this.reason=... 继续阅读 >
2020
09-24

JS函数参数的传递与同名参数实例分析

本文实例讲述了JS函数参数的传递与同名参数。分享给大家供大家参考，具体如下：函数参数的传递函数参数如果是原始类型值，传递方式是值传递。这意味着，在函数体内修改参数值，不会影响函数外部。varp=2functionf(p){p=3}f(p)p//2上面代码中，变量p是一个原始类型的值，传入函数f的方式是值传递，因此在函数内部，p的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。但是，如果函数参数是复合类型，传入函数的方... 继续阅读 >
2020
09-24

JS函数本身的作用域实例分析

本文实例讲述了JS函数本身的作用域。分享给大家供大家参考，具体如下：函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在作用域无关。vara=1varx=function(){console.log(a)}functionf(){vara=2x()}f()上面代码中，函数x是在函数f的外部声明的，所以它的作用域绑定外层，内部变量a不会到函数f体内取值，所以输出1，而不是2。总之，函数执行时所在的作用域，... 继续阅读 >
2020
09-24

JavaScript实现tab栏切换效果

JavaScript实现tab栏切换效果 本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><!--css样式--><style>*{margin:0;padding:0;}.box{width:600px;margin:100px500px;border:1pxsolid#999;}li{list-style:none... 继续阅读 >
2020
09-24

js+canvas实现纸牌游戏

js+canvas实现纸牌游戏 本文实例为大家分享了js+canvas实现纸牌游戏的具体代码，供大家参考，具体内容如下废话不多说，先上地址运行截图最后如果完成了会有结束动画，我技术比较渣，难以玩到结束，就不上完成动画截图了。游戏介绍好吧，可能有些好学生在做上机实验时没有玩纸牌游戏，所以容我介绍一下这个游戏，这个游戏是win7自带的一个纸牌类游戏，游戏规则是：将牌按一定的规则码放，最终将所有的牌牌面朝上胜利。有两个地方可以用来码牌，上：以A开... 继续阅读 >
2020
09-24

JS apply用法总结和使用场景实例分析

本文实例讲述了JSapply用法总结和使用场景。分享给大家供大家参考，具体如下：apply是绑定this到指定函数或类，也可以说把函数或者类的方法和属性给到当前作用域。1，使用apply实现继承functionA(name,age){this.name=name;this.age=age;}functionB(name,age,time){A.apply(this,[name])//这里的name必须加上[]}constb=newB('继承');console.log(b)2，使用apply实现多重继承functionClass1... 继续阅读 >
2020
09-24

原生js实现ajax请求和JSONP跨域请求操作示例

本文实例讲述了原生js实现ajax请求和JSONP跨域请求。分享给大家供大家参考，具体如下：直接上代码：constajax=(params={})=>{constnowJson=params.jsonp?jsonp(params):json(params);functionjsonp(params){//创建script标签并加入到页面中varcallbackName=params.jsonp;varhead=document.getElementsByTagName('head')[0];//设置传递给后台的回调参数名params.data['callback']=callback... 继续阅读 >