js代码

js/数值

…衆ロ難τιáo~ 提交于 2020-04-04 20:05:47
1、toString(数字转字符串)   toString方法可以接受一个参数,表示输出的进制。如果省略这个参数,默认将数值转成十进制的字符串;否则就根据参数指定的进制,将一个数字转化成某个进制的字符串   toString 方法只能将十进制的数,转为其他进制的字符串。如果要将其他进制的数,转回十进制,需要使用 parseInt 方法 。   ( 10 ).toString( )  // "10"   ( 10 ).toString( 2 )  // "1010"   ( 10 ).toString( 8 )  // "12"   ( 10 ).toString( 16 )  // "a"   10["toString"]( 2 )  // "1010"   注意: 上面代码中,数字一定要放在括号里,这样表明后面的点表示调用对象属性。如果不加括号,这个点会被 JavaScript 引擎解释成小数点,从而报错。 2、toFixed(保留数字小数点后几位)   toFixed( )方法将数字转成指定位数的小数的字符串   由于浮点数的原因,小数 5 的四舍五入是不确定的,使用的时候必须小心。   ( 10 ).toFixed( 2 )  // "10.00"   ( 10.005 ).toFixed( 2 )  // "10.01"   注意: 上面代码中,数字一定要放在括号里

JS无缝滚动

試著忘記壹切 提交于 2020-04-04 18:44:15
思路: 1、获取元素。 2、要使图片动起来就是用setInterval来改变,如往左边滚动就改变offsetLeft,把图片的左边距改为负数。 3、当图片往左滚的时候,右边就会出现空白,这时候需要用innerHTML复制原来的4个li 形成8个li 4、就算有8个li,但总会有滚到尽头的时候,这时就做一个判断当offsetLeft大于ul宽度的一半时,把ul拉回来0的位置(往左滚)。 5、当offsetLeft大于0时,就把Left设置为负ul 宽度的一半。(往右滚) 6、鼠标指向图片,图片停止。 7、鼠标离开图片,图片继续滚动。 8、往左滚 往右滚就是控制offsetLeft,负数就是向左滚,正数就是向右滚。 JS代码: 1 <script> 2 window.onload=function() 3 { 4 var pic=document.getElementById('pic'); 5 var ul=pic.getElementsByTagName('ul')[0]; 6 var li=pic.getElementsByTagName('li'); 7 var left=document.getElementById('left'); 8 var right=document.getElementById('right'); 9 var speed=2; 10 11 ul

js/预解析

∥☆過路亽.° 提交于 2020-04-04 16:48:18
1、js引擎在执行js代码时,会先解析js代码然后再去执行js代码,在解析js代码时会将var声明的变量和function声明的函数提到当前作用域代码的顶部。 2、当var声明的变量名与function声明的函数名一样的时候,函数优先级更高   (1)案例一     console.log(f)     var f = 123;     function f(){console.log(456)}      解析过程:     var f;     function f(){console.log(456)} // 函数整体提升     console.log(f) // function f(){console.log(456)}     f = 123;   (2)案例二     console.log(f)      function f(){console.log(456)}     var f = 123;      解析过程:     function f(){console.log(456)} // 函数整体提升     var f;     console.log(f) // function f(){console.log(456)}     f = 123; 来源: https://www.cnblogs.com/cuishuangshuang/p

jquery 之天气查询小部件

允我心安 提交于 2020-04-04 16:44:18
用ajax从网络接口获取对应的数据,然后显示。 本demo没有做css美化,比较丑。 数据接口: "http://api.map.baidu.com/telematics/v3/weather?location="+city+"&output=json&ak=EGgzZ22dsboWQEcPQ6KDQLknQd3YkkkP" 中间的city为选择的城市名称! 级联省市县的获取代码没有贴出,可以前往我的 github 仓库获取: https://github.com/qiuqiu2945/jquery/tree/master/questforWeather 这个代码使用了template模板来创建元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取天气</title> <script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/template-web.js"></script> <script type="text/html" id="optionTemp"> {{each result as value i}}, <option value={{value.id}}>{{value.cityName}}</option> {{

使用css将网页变成黑白色

时光总嘲笑我的痴心妄想 提交于 2020-04-04 14:34:13
其实将整个网页全局变色,无非就是三种,css直接设置,添加svg滤镜,通过js遍历所有标签更改颜色,于是 1、css 直接编辑样式,然后在需要应用的地方设置class 1 .gray { 2 -webkit-filter: grayscale(100%); 3 -moz-filter: grayscale(100%); 4 -ms-filter: grayscale(100%); 5 -o-filter: grayscale(100%); 6 filter: grayscale(100%); 7 filter: gray; 8 } 2、svg 先编写svg文件 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> css调用 1 filter: url(gray.svg#grayscale); 3、js遍历 直接插入代码就好啦,能白嫖是不可能手写的(ps:用rgba和!important的无法改变

js,jQuery获取html5的data-*属性

无人久伴 提交于 2020-04-04 14:32:20
今天做项目的时候发现一个坑,关于jQuery获取data-*属性的方法data(),特写此篇来记录。 data-* 自定义数据属性 HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这些属性可以随意添加,随意命名,目的是为元素提供与渲染无关的信息,或提供语义信息。 js获取 data-* 的方式 通过dataset属性访问 //HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj"></div> //js代码 var div = document.getElementById("myDiv"); var appId = div.dataset.appid;//获取data-appid的值 var myName = div.dataset.myname;//获取data-myname的值 //设置值 div.dataset.appid = 456; div.dataset.myname = "newname"; //最终HTML结果 <div id="myDiv" data-appid="456" data-myname="newname"></div> dataset属性的值是DOMStringMap的一个实例,名值对的映射。每个data-name形式的属性都有一个对应的属性,只不过该属性名没有data

js异步执行原理

寵の児 提交于 2020-04-04 11:56:05
我们都知道js是一个单线程的语言,所以没办法同时执行俩个进程。所以我们就会用到异步。 异步的形式有哪些那,es5的回调函数。es6的promis等 异步的运行原理我们可以先看下面这段代码 应该很多人都知道这个打印的值是10个10. 也有知道当我们执行的for循环的时候,他会把for循环执行完成以后再去执行 setTimeout ,在执行 setTimeout 的时候这是时候的i已经变成了10所以就打印10个10。 但是这里面的执行过程是这样的。我们用一个图来做解释 图画的有点丑啊,大致的执行流程就是这样。 在js执行的时候,我们在主线程执行的好好的,然后遇到了一个回调函数,然后他会把这个回调函数异步处理,就是放到事假队列中。 然后我们主线程接着去执行,当主线程执行完成以后,在去执行事件队列里的函数。然后进行返回。 在事件队列里,不存在从上到下进行执行。他会看那一个先执行完成,就直接返回那一个。 什么意思呢。我们看下面这个代码 执行结果为1然后2 当js执行的时候。这俩个会放进事件队列。js是从上往下执行。 所以他会先把1放入事件队列中,然后在放入2. 这就可以看出在事件队列中,谁先执行完成,就返会谁到主线程上。 这也是异步的一个执行过程 来源: https://www.cnblogs.com/chenyudi/p/12630702.html

js 实现对象的混合与克隆效果,带完整版解析代码

女生的网名这么多〃 提交于 2020-04-04 09:34:22
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。 本篇文章为您分析一下原生JS写对象混合与克隆 对象混合 页面中如下需求 var obj1 = { x: 1, y: "a" } var obj2 = { x: "b", o: 6 } 页面上有两个对象 我们要把这两个对象混合成一个 形成如下结构: // 将obj2混合到obj1中 obj = { x: "b", y: "a", o: 6 } 参考代码: // ES5之前的版本 function mixin(obj1, obj2){ // 第一步: 创建一个对象 var newObj = {}; // 第二步: 循环obj2中的对象 for(var prop in obj2){ // 第三步: 将obj2中的属性添加到新创建爱对象中 newObj[prop] = obj2[prop]; } // 第四步: 循环obj1中的对象 for(var prop in obj1){ // 第五步: 看看obj1中的属性在不在obj2中,如果不在就将他加入的新的对象中 if(!(prop in obj2)){ newObj[prop] = obj1[prop]; } } // 最后返回这个新的对象 return newObj; } // ES6版本 // function mixin

js 控制Span的内容

心已入冬 提交于 2020-04-03 21:38:22
楼主 exceyond(南柯) 2004-03-24 18:05:43 在 Web 开发 / JavaScript 提问 示例如下: <SCRIPT language=javascript> var pakstring="lalalala" document.all.pak.innerHTML=pakstring; </script> <hr>呼呼<hr>哗哗<hr>< span id=pak></ span > 显示出错是“document.all.pak 为空或不是对象” 请指正,记得以前这样写可以的;另外,刚装的ie6 问题点数:30、回复次数:5 Top 1 楼 kisslan(郁忧的曼陀萝) 回复于 2004-03-24 18:28:26 得分 10 把 js 放在 span 后面,你放在前面,它还没解析到 span ,所以会报错 :) Top 2 楼 exceyond(南柯) 回复于 2004-03-24 18:38:20 得分 0 我的本意是写一段html放在 js 里作为独立文件的,所以必然会出现 <script src=mycode. js ></script>在< span id=pak></ span >前面的情况,有办法实现吗? 印象里html是很经的起摔打折磨的, js 大多数可以随便放的 多谢,请再指点一二。 Top 3 楼 afoskoo(暂停打印)

JS作用域

主宰稳场 提交于 2020-04-02 23:29:25
<script> // 1.JavaScript作用域 : 就是代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突 // 2. js的作用域(es6)之前 : 全局作用域 局部作用域 // 3. 全局作用域: 整个script标签 或者是一个单独的js文件 var num = 10; var num = 30; console.log(num); // 4. 局部作用域(函数作用域) 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用 function fn() { // 局部作用域 var num = 20; console.log(num); } fn(); </script> <script> // 变量的作用域: 根据作用域的不同我们变量分为全局变量和局部变量 // 1. 全局变量: 在全局作用域下的变量 在全局下都可以使用 // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量 var num = 10; // num就是一个全局变量 console.log(num); function fn() { console.log(num); } fn(); // console.log(aru); // 2. 局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量 // 注意: