JS
文章平均质量分 54
Byte_Dance
长风破浪会有时,直挂云帆济沧海
展开
-
原生JS获取元素属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS获取元素属性</title></head><body><div原创 2018-03-02 23:24:13 · 1818 阅读 · 0 评论 -
同一个网址,根据pc跟移动端,跳到对应页面
function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i...转载 2018-03-06 16:53:07 · 2785 阅读 · 0 评论 -
纯JS使用switch和if语句判断控制卡的型号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body><select na原创 2018-03-31 22:31:34 · 376 阅读 · 0 评论 -
js取得IP地址的方法
1,js取得IP地址的方法一<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type="text/javascript"> document.write(returnCitySN["cip"]+','+returnCitySN["cname"])转载 2018-04-04 21:54:48 · 1801 阅读 · 1 评论 -
HTML中三种消息框 alert,confirm,prompt
满足条件,即弹出一个消息框function show_alert(){ alert("弹出信息"); } 满足条件,即时弹出一个可以控制确认取消的消息框 var result = confirm('是否删除!'); if(result){ alert('删除成功!'); }else{ alert('不删除!'); } ...翻译 2018-05-18 13:35:04 · 18527 阅读 · 0 评论 -
JS闭包直接调用外层函数和把函数赋值给变量再调用有啥区别?
function f1(){ n = 999; return function f2(){ alert(n); } }// var result=f1(); //这里是调用了一个f1()函数, 但是f1()函数所返回的是一个函数引用// result(); // 999 //...转载 2018-05-07 16:13:12 · 2660 阅读 · 0 评论 -
使用AJAX和PHP的GD库自定义一个验证码教研全过程
HTML静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证码页面</title> <style> img{ c原创 2018-06-02 17:28:48 · 267 阅读 · 0 评论 -
[插件封装] 创建一个banner广告栏,点击切换图片
使用Bootstarp官方插件创建一个幻灯片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jquery移入移出幻灯片效果</title> <!--匹配移动端--&原创 2018-03-02 00:36:39 · 333 阅读 · 0 评论 -
JS点击后变换样式 , 元素的作用域案例 , 借助元素本身的属性,
//这里要把获取的数据存储放置到点击事件的外部作为全局变量,不然数据是会跟随这个元素的内容而改变的,自变量和存储的数据都要放置在函数外部,这里要注意的是变量的作用域j=0; //自变量v = $(" #h2").text(); //获取到的原标题$("#按钮").click(function(){ if(j%2 == 0){ $(" #headline h2...原创 2018-03-05 16:34:17 · 266 阅读 · 0 评论 -
JS小数运算出现多为小数问题的解决方法
function accMul(arg1,arg2){ var m=0,s1=arg1.toString(), s2=arg2.toString(); try{ m+=s1.split(".")[1].length}catch(e){} try{ m+=s2.split(".")[1].length}catch(e){} ...转载 2018-03-18 16:25:56 · 608 阅读 · 0 评论 -
JS元素坐标定位 screenX clientX pageX概念
screenX clientX pageX概念screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动如图(红点就是鼠标当前位置)...转载 2018-02-24 20:40:19 · 1055 阅读 · 0 评论 -
[封装插件]实现多个下拉菜单select中的option移动操作
使用JS的写法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #form1{原创 2018-02-09 14:29:42 · 744 阅读 · 1 评论 -
[封装插件]创建一个弹力球的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹力球效果</title> <style> *{ margin:0;原创 2018-01-13 12:27:45 · 869 阅读 · 0 评论 -
[封装插件]键盘录入可上下左右移动的元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试标题</title> <style> #divid{ width:转载 2018-01-09 13:13:47 · 510 阅读 · 1 评论 -
[封装插件]网页开发右键菜单栏
<!DOCTYPE HTML > <HTML LANG = “EN” > <HEAD> <META 字符集= “UTF-8” > <标题>开发右键菜单</ title> <脚本类型= “文/ JavaScript的” SRC = “$函数.js“ > </ scrip原创 2018-01-03 16:41:34 · 243 阅读 · 1 评论 -
[封装插件]百度网页的进入页面即加载输入框制作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面加载就获取输入框焦点</title> <script type="text/javascript" s转载 2017-12-28 17:46:51 · 325 阅读 · 0 评论 -
字体限制为12px的解决方法
webkit默认支持最小字号为12px font-size:12px; -webkit-transform-origin-x: 0; /*定义元素被置于x轴的何处*/ -webkit-transform: scale(0.90); /*定义元素被缩放*/...翻译 2018-03-11 16:20:37 · 1686 阅读 · 0 评论 -
JS限制输入框只能输入数字
//限制为输入数字,这里只能用类名去找,使用class名找不到document.getElementById("ssss").onkeyup = function(){ this.value=this.value.replace(/[^\d]/g,'');}或者直接在input内限制 //这里是将input限制为只能输入四个,且都是数字<input type="text" na...翻译 2018-03-11 17:24:26 · 622 阅读 · 0 评论 -
javaScript的AJAX实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试AJAX</title></head><body> <div翻译 2018-06-09 18:13:50 · 256 阅读 · 0 评论 -
点击发起qq对话
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1406838464&site=qq&menu=yes"> 发起会话</a>翻译 2018-07-10 11:01:22 · 1148 阅读 · 0 评论 -
HTML文本插值过滤
在对DOM节点插入数据的时候,如果输入的插值正好是一个HTML标签.那么插入进去的话会对页面造成破坏,影响显示效果.那么我们就要对页面插值进行过滤,具体方式是用正则对 < > 两个符号进行替换成字符显示.例如 : <body> <div id="divs"> </div> <script> ...转载 2018-08-07 11:36:15 · 521 阅读 · 0 评论 -
插件封装:无限循环滚动
这个方法需要注意的是 : img元素必须要在CSS内先指定宽度,不然等JS去设置宽度的时候,由于图片本身加载进来的时候是图片原来的尺寸,当加载过程中鼠标一旦滑动了一下,就会触发hover离开的函数,这时候再鼠标滑动进去,相当于执行了两次hover离开,就会出现滚动停不下来的情况.为防止 定时器累加 这种情况出现,也可以给定时器上做好预防(即开启定时器之前 都要先关闭定时器):&l...原创 2018-12-31 22:49:09 · 410 阅读 · 0 评论 -
JS面向对象编程
最开始的原型图添加了一个 construtor:Player 再添加一个 init 初始化方法之后执行了这两段语句之后,结构又变了如果默认情况下不修改 init 函数的prototype的指向 那么这个函数创建的对象就是通过 init 函数创建的 和Dog对象没有关系了 函数式创建对象: function f1(x,y) { ...翻译 2019-01-01 01:12:17 · 229 阅读 · 0 评论 -
纯JS制作一个网页时钟特效
主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒) 来对三个指针元素进行旋转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title原创 2019-01-05 22:18:59 · 5312 阅读 · 1 评论 -
jquery可拖拽进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, in原创 2019-01-01 23:25:03 · 1193 阅读 · 0 评论 -
基于ECharts 图标JS库创建Demo
效果: 首先要到 ECharts 官网上下载 ECharts.js 这个包传送门 : http://www.echartsjs.com/download.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&翻译 2019-01-02 11:34:20 · 624 阅读 · 0 评论 -
使用正则表达式格式化字符串
<script> let str = " H e l l o "; function mapping(str){ let newArr = []; let arr = str.split(""); for(let i = 0;i<arr.length;i++){ //设置正则表达式 匹...原创 2019-01-19 15:35:07 · 969 阅读 · 0 评论 -
javascript中的 call方法和apply方法的使用
call和apply方法主要用于改变函数内部this 的指向调用一个方法,方法内使用了this ,则这个this就代表的是 window,因为函数默认都是在window下边的子函数, 只不过省略window.fun function f1(){ alert(1); console.log(this); } function f2(){...原创 2019-01-26 20:28:31 · 333 阅读 · 0 评论 -
ES6箭头函数和普通函数下的 this 指向
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性。下面来总结一下他们之间的区别:普通函数下的this:在普通函数中的this总是代表它的直接调用者,在默认情况下,this指的是window, 在严格模式下,没有直接调用者的函数中的this是 undefined使用 call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象箭头函数中的...转载 2019-01-22 23:35:40 · 482 阅读 · 0 评论 -
JS生成随机数
/*** * * @param Digits 位数 * @param type 生成类型 * 类型1 数字大小写字母全类型 使用数字1表示 * 类型2 数字类型 使用数字2表示 * 类型3 小写类型 使用数字3表示 * 类型4 大写类型 使用数字4表示 * 类型5 数字+小写类型 使用数字5表示...原创 2018-12-25 12:23:03 · 1027 阅读 · 1 评论 -
电商放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { ma原创 2019-01-04 00:25:12 · 534 阅读 · 0 评论 -
使用HTML5创建一个拖拽预览页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial翻译 2018-10-03 19:56:35 · 3530 阅读 · 0 评论 -
arguments和prototype以及constructor
arguments argument 可以把传入函数的参数变成一个伪数组 <script> function sum(){ console.log(arguments); } sum(10,2,3); </script>prototype 原型创建一个构造...翻译 2018-11-28 22:05:51 · 3010 阅读 · 0 评论 -
动态页面静态化
随着网站的内容的增多和用户访问量的增多,无可避免的是网站加载会越来越慢,受限于带宽和服务器同一时间的请求次数的限制,我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化。一般情况下会从以下方面来做优化动态页面静态化优化数据库使用负载均衡使用缓存使用CDN加速现在很多网站在建设的时候都要进行静态化的处理,为什么网站要进行静态化处理呢?我们都知道纯静态网站是所有的网页都是独立的...转载 2018-12-01 18:28:08 · 1351 阅读 · 0 评论 -
JS变量作用域的一些理解
1:函数调用 变量声明提前var name = "小明";fn();function fn(){ console.log(name); var name = "小红";}执行这一段代码.结果为 控制台输出 undefined 执行规律如下: 1,在外部定义name变量,这是全局的 2.接着执行 fn() 函数,函数执行在函数定义之前 ,...原创 2018-12-08 22:10:43 · 286 阅读 · 0 评论 -
模拟Vue双向绑定
<!--模拟Vue--> <script> window.onload = function(){ Binding("ins","boxs"); } function Binding(ins,boxs){ // 创建数据对象 window.d...翻译 2018-12-19 14:01:14 · 254 阅读 · 0 评论 -
H5翻页动画原理实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .divs1{原创 2018-12-09 11:06:43 · 2306 阅读 · 2 评论 -
将页面的table表格导出为excel或者word
<script> /*第一个参数为:表格的id名 第二个参数为:a标签的id名*/ function exportTable(tableId, aid,fileName) { // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档, // 设置...翻译 2018-12-20 23:49:02 · 2526 阅读 · 0 评论 -
使用Jquery中的on()来进行事件委托配合JS闭包实现效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial原创 2018-12-26 22:51:38 · 306 阅读 · 0 评论 -
input File 选择图片后 预览
<form action="upload.php" method="post" enctype="multipart/form-data"> <div> <img src="" class="img"> </div> <input type=转载 2019-02-08 21:38:52 · 1259 阅读 · 0 评论