web前端
关注
分享
扫一扫
UzumakiHan
这个作者很懒，什么都没留下…
展开
-
rem+媒体查询实现web移动端适配
在css中引入以下代码@media (min-width: 240px) { html { font-size: 32px; }}@media (min-width: 320px) { html { font-size: 42.66667px; }}@media (min-width: 360px) { html { font-size: 48px; }}@media (min-width:原创 2020-06-08 17:32:24 · 376 阅读 · 5 评论 -
前端实现评分功能
实现的效果如下：具体代码如下：html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg原创 2020-06-04 16:58:42 · 2310 阅读 · 0 评论 -
前端成语点击验证
首先先看看效果图吧需求分析：1.随机生成成语，成语的位置随机分布，并渲染在页面上。2.点击文字的有效区域，依次点击，并将点击的文字依次保存在数组中，然后和之前生成的成语进行比较，如果相等，则验证成功，否则验证失败，重新刷新页面。代码实现：首先html的布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c原创 2020-06-03 11:21:16 · 865 阅读 · 0 评论 -
前端成语点击验证的优化
对上一篇前端成语点击验证博客进行优化，主要优化事项有：1.点击时，加上序号显示点击的顺序2.当验证成功时，不能再点击文字。主要优化的代码如下JS部分://事件委托var verifyArr = [];var str = null;var timer = null;var a = 0;var idiomBox = document.querySelector('.idiom_box');clearTimeout(timer)idiomBox.onclick = function (e原创 2020-06-03 14:56:50 · 420 阅读 · 1 评论 -
JS手机号分割
对11位的手机号进行3-3-4分割。const splitMobile = (mobile, format = '-') => { return String(mobile).replace(/(?=(\d{4})+$)/g, format)}原创 2021-10-14 10:04:31 · 1268 阅读 · 0 评论 -
原生JS实现简单的打字测试
需求：实现以下的功能1.有三个小方块，分别用来当前输入的错误数量、打字的时间和当前的正确率。2.下方是用来显示测试句子的容器。3.最后是输入框具体思路：点击输入文本区域时，开始测试，会根据用户输入来统计当前的错误数和正确率，时间会减少。当输完整段句子时，会自动更新下一段句子。当时间为0时，游戏结束，文本框不能再输入，然后会统计打字速度。具体代码如下：Html部分<!DOCTYPE html><html lang="en"><head> &l原创 2020-06-02 11:06:56 · 860 阅读 · 0 评论 -
初识Vue.js数据与方法
Vue.js:是一套构建用户界面的渐进式框架,Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。可以通过引入来使用VueVue的数据：在html中： &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h2&amp;gt;{{title}}&amp;l原创 2018-11-17 15:47:45 · 239 阅读 · 0 评论 -
初识Vue属性绑定
HTML 属性中的值应使用 v-bind 指令。现在想通过在Vue中绑定a标签的href属性中的url在js： new Vue({ el:"#app", data:{ webtarget:"https://www.baidu.com/" } ...原创 2018-11-17 16:41:26 · 265 阅读 · 0 评论 -
jQuery对象转化成DOM对象
jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。将jQuery...原创 2018-11-29 09:25:42 · 537 阅读 · 0 评论 -
v-for循环语句
循环语句循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：数组遍历来渲染列表在html中：<div id="app" style="margin-top:100px;"> <h1>v-for ...原创 2018-11-19 09:54:08 · 1210 阅读 · 0 评论 -
Vue的条件语句
条件判断：v-if：条件判断使用 v-if 指令在html：<div id="app" style="margin-top:100px;"> <h1>v-if 条件</h1> <button @click="error = !error" type="button" class="bt原创 2018-11-18 19:12:02 · 1664 阅读 · 0 评论 -
了解JavaScript正则表达式
正则表达式修饰符：i ：执行对大小写不敏感的匹配。g :执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。var reg = /ab/;var str = "ababababab";在没有全局匹配的时候，只返回一个 var reg = /ab/g; var str = "ababababab";g :执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。...原创 2018-10-27 16:45:47 · 817 阅读 · 0 评论 -
初识JavaScript正则表达式
RegExp:正则表达式的作用：匹配特殊字符或有特殊搭配原则的字符的最佳选择。正则表达式的两种新建方式；1.直接量var reg = /pattern/attributes参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。EC...原创 2018-10-27 15:26:10 · 181 阅读 · 0 评论 -
异步加载JS
js的加载缺点：加载工具方法没必要阻塞文档，过多的js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载，用到再加载，不用不加载。javascript 异步加载 的 三种方案1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js...原创 2018-10-26 17:37:15 · 1136 阅读 · 0 评论 -
取消冒泡和阻止默认事件
取消冒泡：W3C标准 event.stopPropagation();但不支持ie9以下版本IE独有 event.cancelBubble = true;封装阻止默认事件的函数 cancelHandler(event);function stopBubble(event){ if(event.stopPropagation){ event.stopPropagati...原创 2018-10-29 15:02:20 · 1092 阅读 · 0 评论 -
初识Vue事件
鼠标单击事件:v-on:click在html中：<div id="app" style=" margin-left: 100px;margin-top: 100px; "> <button v-on:click="add" type="button" class="btn btn-info">年龄加1</button&am原创 2018-11-17 17:55:25 · 190 阅读 · 0 评论 -
Vue事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.stop：阻止单击事件继续传播在htm...原创 2018-11-17 21:08:41 · 395 阅读 · 0 评论 -
jQuery捕获
jQuery - 获取内容和属性jQuery 中非常重要的部分，就是操作 DOM 的能力。获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值下面就用例子来说明一下：tex...原创 2018-11-29 15:54:42 · 476 阅读 · 0 评论 -
jQuery选择器4
:eq()选择器、:gt()选择器、:lt()选择器:eq() 选择器选取带有指定 index 值的元素。:gt() 选择器选取 index 值大于指定数字的元素。:lt() 选择器选取 index 值小于指定数字的元素。举个例子jQuery :not() 选择器定义和用法:not() 选择器选取除了指定元素以外的所有元素。语法$(":not(selector)")举个例...原创 2018-11-29 15:09:50 · 181 阅读 · 0 评论 -
jQuery选择器3
jQuery parent > child 选择器定义和用法(“parent > child”) 选择器选取指定元素的直接子元素的所有元素。jQuery 父后代 选择器定义和用法(“parent descendant”) 选择器选取指定元素的后代的所有元素。元素的后代可以是元素的第一代、第二代、第三代等等。jQuery element + next 选择器定义和...原创 2018-11-29 14:27:06 · 218 阅读 · 0 评论 -
String API
String API:1.大小写转换：所有的字母全部转换为大写或者小写（用于验证码）str = str.toUpperCase()：转大写str = str.toLowerCase() : 转小写注意：String API 都无法修改原字符串2.获取指定位置的字符：str.charAt(i)获取指定位置字符的unicodestr.charCodeAt(i)3.截取：str...原创 2018-11-26 15:23:17 · 277 阅读 · 0 评论 -
jQuery选择器2
jQuery :first-child 选择器定义和用法:first-child 选择器选取属于其父元素的第一个子元素。因为P的父级元素div的一个元素刚好是P，所以就标注P的背景颜色为黄色jQuery :first-of-type 选择器定义和用法:first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。:first-of-type是指选取指...原创 2018-11-29 11:53:49 · 176 阅读 · 0 评论 -
jQuery选择器1
jQuery选择器之id选择器id选择器：一个用来查找的ID，即元素的id属性$( "#id" )id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器值得注意：id是唯一的，每个id值在一个页面中只能使...原创 2018-11-29 11:33:43 · 364 阅读 · 0 评论 -
jQuery对象与DOM对象
对于才开始接触jQuery库的初学者，我们需要清楚认识一点：jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象：通过原生DOM模型提供的document.getElementById(“demo1”) 方法获取的DOM元素就是...原创 2018-11-29 09:11:02 · 429 阅读 · 0 评论 -
Vue的computed计算属性
简单地用一个例子来举例说明methods属性和computed属性的区别。在html中：<div id="app"> <h1>Computed 计算属性</h1> <button @click="a++">Add to A</button> <button @cli原创 2018-11-18 12:23:25 · 545 阅读 · 0 评论 -
事件冒泡和捕获
事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）example:html:<div class="box1"> <div class="box2"> <div class="box3"></div></div><原创 2018-10-25 20:52:04 · 571 阅读 · 0 评论 -
事件处理
绑定事件的方法：1.ele.onxxx = function (event) {}兼容性很好，但是一个元素只能绑定一个处理程序基本等同于写在HTML行间上html：&lt;div style="width: 200px; height:200px;background-color:red;position: absolute;top: 100px;left: 100px;"&gt;&l...原创 2018-10-25 17:56:08 · 234 阅读 · 0 评论 -
js克隆
JavaScript中的克隆分为浅层克隆和深层克隆。浅层克隆：var obj = { name : 'abc', age : 123, sex : 'female', card:['visa','unionpay'] } var obj1 = {}function clone (origin,target) { var target = target || {...原创 2018-10-13 22:29:20 · 347 阅读 · 0 评论 -
JavaScript立即执行函数
立即执行函数一般状况下， 我们需要调用一个JavaScript 函数, 基本的状况都是先定义， 然后再调用。如果不需要显示调用函数， 让这个函数在定义的时候就执行的话，就可以用到立即执行函数。立即执行函数：此函数没有声明，在一次执行过后即释放，适合做初始化工作。立即执行函数有以下常用的写法：第一种：(function (){ alert("Hello World!!");}());...原创 2018-10-06 23:39:40 · 236 阅读 · 0 评论 -
JavaScript的typeof和类型转换
1.tyoeof:typeof可以帮助我们区分数据类型：数据类型有：number string boolean underfined object function这6种example:var num = 123; console.log(typeof(num));数据类型为number2.类型转换：类型转换又分为显示类型转换和隐式类型转换：1.显示类型转换;以下几种代表显示...原创 2018-09-28 13:57:32 · 727 阅读 · 0 评论 -
JavaScript中对象的遍历（对象枚举）
如果要对一个对象遍历的时候，我们可以用到for in循环：举个例子：var obj = { name : 'hehe', age : 28, sex : 'male', wife : { name : 'haha', age : 26, son: { age : 1, sex : 'male' } }}for(var prop in obj){ c...原创 2018-10-13 10:41:15 · 2694 阅读 · 0 评论 -
JavaScript中的作用域
作用域精解[[scope]]:每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]]：指的就是我们所说的作用域，其中存储了运行期上下文的集合。作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。example...原创 2018-10-06 14:32:18 · 225 阅读 · 0 评论 -
JavaScript中的预编译
JavaScript 预编译JavaScript运行三部曲：1.语法分析：先全部扫一遍 看有没有语法错误.2.预编译(执行前一刻) ：函数声明整体提升变量 声明提升函数声明整体提升(相当于提升到程序的最前面)一个变量被声明后，变量声明提升(相当于把变量声明语句放到最前，赋值不变)JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明...原创 2018-10-05 11:48:41 · 282 阅读 · 0 评论 -
关于JavaScript的条件语句和循环语句
1.条件语句：if if-else else-if:if语句:demo：&lt;script type="text/javascript"&gt;if(表达式){ document.write(输出); } &lt;/script&gt;如果if中的表达式成立的话，就会执行一次输出语句，不成立的话就不会执行。if-else:demo: &lt原创 2018-09-27 11:12:28 · 412 阅读 · 0 评论 -
CSS的导航栏
垂直导航栏：html中：<ul> <li><a href="#">主页</a></li> <li><a href="#">新闻</a></li> <li>&原创 2018-10-11 22:57:07 · 407 阅读 · 0 评论 -
JavaScript中的运算符
1.比较运算符：“&amp;gt;”,“&amp;lt;”,“==”，“&amp;gt;=”,“&amp;lt;=”,“！=”2.逻辑运算符：“&amp;amp;&amp;amp;” “||”“！”被认定为false的值有以下几种类型：underfined , null ,NaN ,&quot;&quot;, 0, flase关于逻辑运算符的逻辑结果的运算规则;1.关原创 2018-09-26 22:51:42 · 376 阅读 · 0 评论 -
JavaScript的变量和值类型
1.JavaScript的变量：与代数一样，JavaScript 变量可用于存放值和表达式。变量可以使用短名称（比如 a 和 b），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。变量的使用规范要点：1.变量必须以字母开头2.变量也能以 $ 和 _ 符号开头3.变量名称对大小写敏感（y 和 Y 是不同的变量）JavaScript 语句和 JavaScr...原创 2018-09-26 20:33:42 · 280 阅读 · 0 评论 -
引入JavaScript的两种方法
引用JavaScript的方法：使用方式：使用&lt;script&gt;属性的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript的文件。一、页面嵌入方式：一般放在&lt;head&gt;与&lt;/head&gt;之间。如：1.可以使用引入&lt;script&gt;标签：&lt;script&gt;原创 2018-09-25 21:02:26 · 2610 阅读 · 0 评论 -
JavaScript中this指向
JavaScript中this的四大判定：1.默认绑定this指向window：example： function test (c){ var a = 123; function b(){ } } test(1);在预编译的过程当中AO{c:1a:undefonedargum...原创 2018-10-14 15:24:17 · 750 阅读 · 0 评论 -
JavaScript闭包
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有的作用域链不释放，造成内存泄露。闭包的三大特点为：1、函数嵌套函数2、内部函数可以访问外部函数的变量3、参数和变量不会被回收。举个例子：function a(){ function b(){ var bbb = 234; document.write(aaa); } var aaa = 100; retu...原创 2018-10-08 14:00:44 · 218 阅读 · 0 评论