分类：JS

2020
10-08

js实现浏览器打印功能的示例代码

最近接触到一个新需求，实现打印机打印小票的功能。打的一桌子小票（惭愧），不过也基本满足了业务上的需求，现在分享一下如何实现(好记性不如烂笔头)先上代码//布局代码<div id="print">  <div id="print_content"></div></div>//js部分代码varf=document.getElementById('printf');if(f){document.getElementById("print_content").removeChild(f);}varprinthtml=`<divstyle="... 继续阅读 >
2020
10-08

js实现浏览器打印功能的示例代码

最近接触到一个新需求，实现打印机打印小票的功能。打的一桌子小票（惭愧），不过也基本满足了业务上的需求，现在分享一下如何实现(好记性不如烂笔头)先上代码//布局代码<div id="print">  <div id="print_content"></div></div>//js部分代码varf=document.getElementById('printf');if(f){document.getElementById("print_content").removeChild(f);}varprinthtml=`<divstyle="... 继续阅读 >
2020
10-08

jQuery 实现DOM元素拖拽交换位置的实例代码

实现步骤1.html+bootstrap布局画3个面板。注：面板样式position属性必须是绝对位置或者相对位置。2.监听面板的的mousedown事件。记录当前对应面板的位置target_index，设置面板透明拖动。3.监听当前被拖动的面板的mousemove事件。根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。4.监听当前被拖动的面板的mouseup事件。当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchan... 继续阅读 >
2020
10-08

javascript canvas时钟模拟器

javascript canvas时钟模拟器 canvas时钟模拟器，供大家参考，具体内容如下主要功能能够显示当前的时间，也能够切换夜晚模式和白天模式主要代码h=h>12?h:h-12//下午时间修正//如果画布状态很混沌的话多使用ctx.restore()恢复到最初状态而不要强行再用同样的方法矫正状态,比如使用rotate顺时针旋转n度之后，再使用rotate以同样的逆时针角度转回去.参考代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>钟表模拟器</ti... 继续阅读 >
2020
10-08

Js on及addEventListener原理用法区别解析

一.首先介绍两者的用法：1.on的用法：以onclick为例第一种：obj.onclick=function(){//dosomething..}第二种：obj.onclick=fn;functionfn(){//dosomething...}第三种：当函数fn有参数的情况下使用匿名函数来传参：obj.onclick=function(){fn(param)};functionfn(param){//dosomething..}不能够这样写:错误写法：obj.onclick=fn(param):因为这样写函数会立即执行，不会等待点击触发，特别注意一下2.addEventListener的... 继续阅读 >
2020
10-08

JS call()及apply()方法使用实例汇总

最近又遇到了JacvaScript中的call()方法和apply()方法，而在某些时候这两个方法还确实是十分重要的，那么就让我总结这两个方法的使用和区别吧。每个函数都包含两个非继承而来的方法：call()方法和apply()方法。相同点：这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变th... 继续阅读 >
2020
10-08

JS如何定义用字符串拼接的变量

今天在写js的时候碰到了难题，我又一个页面需要生成很多的变量。但是变量的名称是根据参数的不同而区分的。例如可能需要生成date_1,date_2,datet_3...（后面的数字是根据参数来的）。所以我的函数名应该由varname="test_"+num;生成函数名但这问题就来了。1可以使用window[name]=""这种方式来定义变量：所以var"test_"+num=100;这中肯定是错误的。后来问了大哥后才知道。可以使用window[name]=100这种方式... 继续阅读 >
2020
10-08

JS sort方法基于数组对象属性值排序

JS sort方法基于数组对象属性值排序 sort方法接收一个函数作为参数，这里嵌套一层函数用来接收对象属性名，其他部分代码与正常使用sort方法相同.vararr=[{name:'zopp',age:0},{name:'gpp',age:18},{name:'yjj',age:8}];functioncompare(property){returnfunction(a,b){varvalue1=a[property];varvalue2=b[property];returnvalue1-value2;}}console.log(arr.sort(compare('age')))如何根据参数不同，来确定是升序排列，还是降序排... 继续阅读 >
2020
10-08

基于javascript canvas实现五子棋游戏

本文实例为大家分享了基于canvas的五子棋的具体代码，供大家参考，具体内容如下第一部分：核心类Gobang属性：this.box=box;//存放五子棋的容器this.canvas=null;//画布this.ctx=null;this.size=600;//棋盘大小this.cellNum=20;//单行棋格数量this.padding=this.size/this.cellNum;//padding值this.cellSize=(this.size-this.padding*2)/this.cellNum;//棋格大小this.pieceSize=this.cellSize*3/4;//... 继续阅读 >
2020
10-08

JS数据类型判断的几种常用方法

JavaScript中常见数据类型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十几种。ES6还有新增的数据类型有Symbol、Set、Map等。在实际应用中，我们经常需要判断数据类型，现在我归纳几种方法，希望对大家有所帮助。typeof判断（最常用）typeof是JS提供的一个运算符，专门用来检测一个变量的类型。typeof有2种使用方式：typeof(表达式)和typeof变量名，第一种是对表... 继续阅读 >
2020
10-08

JS实现移动端可折叠导航菜单（现代都市风）

效果图1.html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>index</title><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"rel="externalnofollow"><linkrel="stylesheet"href="css/style.css"rel="externalnofollow"></head><body><divclass="htmleaf-container"><divid="wrapper"><!--菜单--><divclass="menu"><imgi... 继续阅读 >
2020
10-08

JS实现联想、自动补齐国家或地区名称的功能

1.JS部分functionautocomplete(inp,arr){/*函数主要有两个参数：文本框元素和自动补齐的完整数据*/varcurrentFocus;/*监听-在写入时触发*/inp.addEventListener("input",function(e){vara,b,i,val=this.value;/*关闭已经打开的自动完成值列表*/closeAllLists();if(!val){returnfalse;}currentFocus=-1;/*创建列表*/a=document.createElement("DIV");a.setAttribute("id",thi... 继续阅读 >
2020
10-08

js实现星星打分效果

js实现星星打分效果 本文实例为大家分享了js实现星星打分的具体代码，供大家参考，具体内容如下最终效果如下html部分<divclass="container">小主的评价：</div><span></span>css样式<style>.star{font-size:20px;color:gold;cursor:pointer;}.container{display:inline-block;text-align:center;}</style>js部分<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js... 继续阅读 >
2020
10-08

javascript实现贪吃蛇小练习

本文实例为大家分享了js实现贪吃蛇的具体代码，供大家参考，具体内容如下游戏思路：创建方块、控制按钮（showBlock）方块移动（点击开始，不断创建并移除前面的方块，用到队列先进先出）控制移动（doUp\doDown\doLeft\doRight，加入用键盘控制）产生食物方块(generateFood)吃到食物变长（当方块位置相同时，吃食物）判断撞墙、撞到自己游戏结束设置积分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-... 继续阅读 >
2020
10-08

原生js实现随机点名

本文实例为大家分享了js实现随机点名的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>随机点名</title></head><body><h1class="name"id="names">点名</h1><inputtype="button"value="开始"id=start_btn><inputtype="button"value="结束"id=stop_btndisabled><script>"../DOM/too... 继续阅读 >
2020
10-08

JS制作简易计算器的实例代码

做一个简易计算器，效果图片c表示清空，为一个空字符串+/-表示该值为正还是负%表示当前值/100←表示退格，往前删除一个值eval函数是能够计算出字符串表达式或者语句的结果，把结果求出来。代码如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#div1{margin:20pxauto;width:420px;height:490px;background-color:#E8E8E8;border:1pxsolid#ccc;... 继续阅读 >