html逻辑: <!...crossorigin="anonymous" /> ❄️ 雪一直下 ❄️ css逻辑: * { box-sizing: border-box; } body { background-color: #323975...第一步:从上边-20px的地方下来. ? 第二步:到下边105vh的地方去。也就是说整个屏幕的高度*105%就行了. 第三步:动画动画动起来. ?...动画的意思是线性的永远的执行下去. js逻辑: const body = document.body; function createSnowFlake() { const snow_flake
style.css" /> 自动打字机 <script src="main.<em>js</em>...text-align: center; color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } <em>js</em>...<em>逻辑</em>: ?...第二步:显示<em>的</em>文本是什么? ? 第三步:定时器<em>的</em>作用是多次调用writeText函数 ? 第四步:用slice截图文字,从prog变量中截取下标0.。。。。...到下标123456789(复制<em>的</em>截取) ? 第五步:当超出文字<em>的</em>数量时就重新截图(从下标0开始) 注意:slice<em>的</em>第二个参数是不计算到本身<em>的</em>哦-1 效果图: ?
HTML5学堂-码匠:短路,并不仅仅存在于物理学当中,JavaScript中的逻辑操作符也有短路问题,这个问题时常作为前端的考点出现哦!...考查的主要知识为“操作符的运算顺序”、“赋值操作符”以及“逻辑操作符的短路问题”。...运行结果: 'HTML5学堂' '码匠' 逻辑操作符的短路问题 短路问题 短路问题,主要出现在逻辑与、逻辑或这两个操作符当中。...”和“逻辑或”这两种操作符,逻辑与的优先级要优于逻辑或,因此该表达式,等价于 a || ( b && (c=‘码匠’))。...由于a的值为1,在布尔值当中会被转换为true,对于逻辑或(||),一真必真,当第一个表达式为真时,第二个表达式就不再执行了,因此并没有执行(b&& (c='码匠'))这句代码,c也就没有被赋值了。
引入Javascript 的方式有三种 1.在html 中直接放到 2.外部引入js文件 3.在标签直接写 <p...运算符分为 算术运算符、 比较运算符、 逻辑运算符。 当+时如果有字符串和非字符串类型相加,会将其他非string类型转换为string。 字符串之间相加 是拼串 “55”+“8”=558。...2、以驼峰命名规则 ——开始单词小写 后面的单词首字母大写 例如 helloWorld boyAge suZiXing 保留字 js中大小写严格区分的 alert弹框 String() 保留字不能用于普通表示符...=NaN var a = typeof NaN console.log(isNaN(a)) 结束true 判断NaN的方法 逻辑运算符: &&与 ||或 !...全局作用域: 在js中作用域: 一个变量作用的范围 1、全局作用域(整个 标签中): 页面打开全局作用域被打开,页面关闭全局作用域被销毁; 全局作用域的变量叫全局变量,全部变量可以在全局作用域中使用
转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象 非IE6浏览器:var obj = new XMLHttpReuqest...Date().getTime(),true); 3.发送请求 obj.send(); 4.接收返回值 请求状态监控:onreadystatechange事件:当自己的Ajax...---返回值responseText:从服务器返回的文本:obj.responseText(返回的为字符串) GET方式 function getAjax(){ var obj
原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦
大家好,又见面了,我是你们的朋友全栈君。...1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。...4.onkeydown 按下按键时的事件触发, 5.onkeyup 当按键抬起的时候触发的事件,在该事件触发之前一定触发了onkeydown事件–相当于一个按键,两个事件,没怎么用过 6.onclick...主要是用于 input type=button,input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行,只要选择了就会触发,不是全部选中 8.oninput...当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法: 以上事件可以直接放到input的属性里,例如: 1 , 可以通过js给input
").innerText; var input = document.getElementById("input"); input.value = text; // 修改文本框的内容
在此记录自己已理解并开始遵循的前端代码规范。What How Why 原生JS TitleTip 为了实现对特定的A标签Title的美化,使其可以按照我们想要的样式显示。
content="IE=edge"> 原生...JS拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候...=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 let leftX = event.clientX - drag.offsetLeft;
//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @...
逻辑运算符 在 js 中,我们都知道有逻辑运算符,比如 逻辑与 ( && )、逻辑或( || )、逻辑非( ! )、空值合并运算符(??)...逻辑与 ( && ) 当且仅当所有操作数为 true 时,一组布尔操作数的逻辑与(&&,逻辑连接)运算结果为 true,否则为 false。...它通常与布尔(逻辑)值一起使用。当它是布尔值时,返回一个布尔值。然而,|| 运算符实际上是返回一个指定的操作数的值,所以如果这个运算符被用于非布尔值,它将返回一个非布尔值。...是一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。与逻辑或运算符(||)不同,逻辑或运算符会在左侧操作数为假值时返回右侧操作数。...逻辑赋值 就是在逻辑运算符的情况下+赋值比如 a&&=2,就是 a=a&&2 逻辑空赋值(??=) 逻辑空赋值运算符(x ??
,比如 turndown.js 是最热门的,但却不支持表格的恢复,索性就自己做了一个。...其实之间的转换还挺复杂,需要考虑各个标签的优先级,做完又花了两天才完善到一定程度。 (不过需要提醒的是,Safari 和 iOS 上的浏览器不支持这个,因为它们对正则支持的不够完整。...代码的实现逻辑如下: 其中,最开始声明了一些数组变量,用于将一些转换过程中的中间产物进行储存。 然后 pureHtml 这个变量就是整个加工过程中的原料,一直到最后。...因为这两样东西有这样的包含关系,一般 pre 里可以有 code ,但 code 却没有 pre ,所以在考虑这样的逻辑后,决定这样储存。...第五步,就是替换一些简单的标签,什么标题啊,斜体啊,横线啊等等(还有将一些乱七八糟的标签直接删除).....最后依次处理表格和列表。 第六步,按照一定的规范,依次将上面 “保护” 的内容,进行恢复。
今天看JS文章,发现了一个新方法fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch 这货跟ajax...很类似,跟axios功能一样; 除啦IE这个货之外基本上都支持的属性; fetch('http://example.com/movies.json') .then(function(response...response.json(); }) .then(function(myJson) { console.log(myJson); }); 看起来是不是很爽,不用安装任何插件完成请求大写的666
笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过。...第一篇: JS数据类型之问——概念篇 1.JS原始数据类型有哪些?引用数据类型有哪些?...这导致JS中的Number无法精确表示非常大的整数,它会将非常大的整数四舍五入,确切地说,JS中的Number类型只能安全地表示-9007199254740991(-(2^53-1))和9007199254740991...对象转原始类型,会调用内置的[ToPrimitive]函数,对于该函数而言,其逻辑如下: 如果Symbol.toPrimitive()方法,优先调用再返回 调用valueOf(),如果转换为原始类型,则返回...这就是面向组合的设计方式。 参考出处: ES5实现继承那些事 重学JS系列:聊聊继承 JS最新基本数据类型:BigInt(译) yck前端面试之道
局部变量 常见的局部变量有以下两种: ● 在函数内声明的变量(使用var); ● 函数参数(形参)。 局部变量存在于函数体内,它们的值只能在函数体内访问和修改。...变量的查找方式 & 作用域链 变量的查找方式 当局部作用域当中出现属性的时候,首先查找当前的作用域当中是否具有存储空间,如果有,直接采用;如果没有,向其父级查找,如果父级没有,继续向上,直到查找到window...也就是“案例1”的代码中 user与window.user是等价的。...,不难看出,全局的user变量和函数内部的变量,并不是同一个变量。...更多的案例练习 在我们(HTML5学堂-码匠)开发的微信小程序“决胜前端”当中,我们最新更新了关于作用域的一些练习题,感兴趣的可以进入微信小程序。
大家好,又见面了,我是你们的朋友全栈君。...原生js数组排序 js 排序 以正序为例(即由小到大) var arr = [0,2,1,4,3,9,6,5,7,8]; // 未排序的数组 var sortArr = null; // 排序后得到的数组...} } return nArr; } sortArr = sort(arr); 此方法会重新生成一个数组,并对其进行排序,并且执行效率较高,但是代码量比较大,对于我们这种爱研(de)究(se)的同学来说是不会满足于此的...这也是递归算法的终结部分 var base = Math.floor(arr.length / 2);//找到中间的基准元素位置 var baseEle = arr.splice(base, 1...这也是递归算法的终结部分 var base = Math.floor(arr.length / 2);//找到中间的基准元素位置 var baseEle = arr[base];//把基准元素从
在JavaScript中,逻辑运算符可以操作ECMAScript中的任意值,同时也不强制返回boolean类型。 在js逻辑操作中,需要隐式的转换为boolean类型再计算。...的作用是把一个其他类型的变量转换成bool类型 在||和&&逻辑操作中的短路原则: a && b:左操作数为false,返回左操作数,否则返回右操作数。...对于多个操作数的情况: a||b||c||d:若结果为true则返回第一个true值,若结果为false则返回最后一个操作数。...使用场景: 1、||操作符最常用的方式是用来从一组备选表达式中选出第一个真值表达式。...3、对函数中的参数赋给默认值,a = a || "defaultValue"。 4、利用&&的短路特性有条件的执行代码。
原生Ajax: Ajax基础: --ajax:无刷新数据读取,读取服务器上的信息 --HTTP请求方法: --GET:用于获取数据,如浏览帖子 --POST:用于上传数据,如用户注册...--有缓存 POST:--不通过网址传递 --post容量较大,一般可达2G --安全性相对较高 --没有缓存 原生Ajax的编写: Ajax...t='+new Date().getTime(),true); --同步:js中指事情必须一件一件来 --异步:js中指多件事情要一起做 --ajax是做异步传输的,... alert('成功:'+oAjax.responseText); } } } 将原生Ajax封装成一个函数使用,最终编写的原生Ajax...为: 1) GET方法封装的函数为: function ajax(url,fnSuccess,fnFaild){ //1.创建Ajax对象 //js中,使用一个没有定义的变量会报错,
/当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 else{ demo.scrollTop++ //如果是横向的 ...setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的...//当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 else{ demo.scrollTop++ //如果是横向的...setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
领取专属 10元无门槛券
手把手带您无忧上云