![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
VUE/JAVASCRIPT
产品迪
When you feel tired, look at the sky⛅️
展开
-
APIS之DOM核心重点
全选框案例:先看效果图:核心思路如下:scirpt核心代码如下:全部代码如下:原创 2020-11-11 09:34:34 · 78 阅读 · 0 评论 -
简易焦点事件
加粗文本 加粗文本标记文本引用文本下面展示一些 内联代码片。 <style> input { color: gainsboro; } </style> <style> input { color: gainsboro; } </style><body> <input type=原创 2020-11-02 23:33:45 · 82 阅读 · 0 评论 -
鼠标事件之简单轮播更换背景图实
案例:先看效果图:核心思路如下:一、二、scirpt核心代码如下:HTML结构代码如下:CSS样式代码如下:原创 2020-11-07 15:29:43 · 280 阅读 · 0 评论 -
如何获取body和html元素?
如何获取body和html元素?body和html元素的获取方式与普通元素不同代码如下(示例): var myBody = document.body; console.log(myBody); var myHtml = document.documentElement; console.log(myHtml);...原创 2020-11-01 14:12:59 · 5344 阅读 · 0 评论 -
按任意键选中输入框,并放大显示输入的快递单号
仿京东快递单号:先看效果图:核心思路如下:scirpt核心代码如下:全部代码如下:原创 2020-11-20 16:50:06 · 267 阅读 · 0 评论 -
跟随鼠标的动图
跟随鼠标:先看效果图:核心思路如下:scirpt核心代码如下:全部代码如下:原创 2020-11-20 16:13:30 · 414 阅读 · 0 评论 -
全选全不选案例
全选框案例:先看效果图:核心思路如下:全选点击事件: 单选checked状态跟随全选单选for循环点击事件: 默认flag = ture;只要有一个按钮没选中,flag = false 即 全选框就不勾选scirpt核心代码如下://全选点击事件,单选跟随全选 allCheck.onclick = function () { for (var i = 0; i < oneChecks.length; i++) {原创 2020-11-07 17:25:21 · 614 阅读 · 0 评论 -
网页禁止文字右键和复制实现
禁用右键菜单:先看效果图:核心思路如下:scirpt核心代码如下:全部代码如下:原创 2020-11-20 15:43:08 · 242 阅读 · 0 评论 -
如何阻止事件冒泡(事件对象方法)
阻止事件冒泡:先看效果图:核心思路如下:scirpt核心代码如下:全部代码如下:原创 2020-11-20 15:33:05 · 455 阅读 · 0 评论 -
密码格式验证案例
密码格式验证案例:先看效果图:核心思路如下:一、失去焦点方法myinput.onblur = function () {//方法体}二、利用HTML DOM className 属性,在CSS样式里定义提示、正确、错误的三个样式类核心代码如下:<script> //获取类元素 var myinput = document.querySelector('.ipt'); var mytips = document.querySelect原创 2020-11-03 15:59:24 · 944 阅读 · 0 评论 -
仿点击关闭广告
仿淘宝关闭广告小窗CSS样式: <style> * { padding: 0; margin: 0; } .pic { margin-left: 100px; margin-top: 100px; text-align: center; float: left; }原创 2020-11-01 17:14:27 · 134 阅读 · 0 评论 -
window.onload 方法的作用
window.onload的作用我们看一下html的格式(如下):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body>通常我们的js可以写在head或者body标签里,因为程序是先执行body标签里面的代码的,如果写到原创 2020-11-01 16:32:40 · 4615 阅读 · 0 评论 -
简易验证码校验
案例:先看效果图:核心思路如下:一、二、scirpt核心代码如下:HTML结构代码如下:CSS样式代码如下:原创 2020-11-07 14:30:39 · 792 阅读 · 0 评论 -
冒泡排序演示
加粗文本 加粗文本标记文本引用文本下面展示一些 内联代码片。// A code blockvar foo = 'bar';<body> <script> //定义一个数组 var arr = [17,61,15,44,88]; //外循环:每一趟会把最大的换到最后面 for (var i = 0; i < arr.length; i++) { //内循环:再次从第一位开始原创 2020-11-02 23:56:24 · 403 阅读 · 0 评论 -
JS时间与日期对象
显示当前系统的日期时间html部分定义一个按钮和一个盒子按钮用来点击盒子用来显示时间 <button>点击显示时间</button> <div>时间框</div>效果图如下所示:js部分代码如下: <script> //获取元素 var btn = document.querySelector("button"); var div = docum原创 2020-11-01 16:14:53 · 802 阅读 · 0 评论 -
表单禁用(一次性按钮)
如何让按钮点击一次后不能再点击?下面展示一些效果图:代码如下:<body><button>按钮</button><input><script> var btn = document.querySelector('button'); var ipt = document.querySelector('input'); btn.onclick = function () { ipt.value原创 2020-11-01 16:44:15 · 255 阅读 · 0 评论 -
鼠标事件之表格隔行换色
鼠标经过离开变色案例:效果图:核心思路如下:一、利用for循环给四个按钮注册鼠标事件二、单数建一个样式类三、用this关键字(指向方法的调用者)className属性将当前指向的行加上类即可scirpt核心代码如下:<script> var trs = document.querySelector("tbody").querySelectorAll('tr'); for (var i = 0; i < trs.length; i++) {原创 2020-11-03 22:25:30 · 136 阅读 · 0 评论 -
循环注册点击之更换背景案例
点击更换背景案例:先看效果图:案例中设置了四个按钮,每当点击不同的按钮时背景就随之更换成想相应的图片。核心思路如下:一、利用for循环给四个按钮注册点击事件二、用this关键字(指向方法的调用者)将获取到当前点击按钮的图片的路径传送给背景scirpt核心代码如下: <script> var imgs = document.querySelectorAll('img'); for (var i = 0; i < imgs.leng原创 2020-11-03 17:53:32 · 180 阅读 · 0 评论 -
节点操作之简易留言板案例
案例:先看效果图:核心思路如下:一、二、scirpt核心代码如下:HTML结构代码如下:CSS样式代码如下:原创 2020-11-07 16:54:38 · 551 阅读 · 0 评论 -
vue计算属性computed基本用法
计算属性computed案例:看图:总结如下:scirpt核心代码如下:全部代码如下:原创 2021-01-23 17:00:53 · 397 阅读 · 0 评论 -
v-for遍历数组
原创 2021-01-31 13:29:54 · 282 阅读 · 0 评论 -
BOM之Location属性(对象)之页面跳转的实现
本次案例将实现 5秒后跳转页面效果:先看效果图:核心思路如下:location.href = ‘http://www.baidu.com’;跳转页面核心代码定义一个跳转页面的方法,若时间大于5则减减,并实时更新div里面的内容。若等于0则跳转。添加按钮监听事件,用setInterval定时器函数记时间,一秒调用一次。全部代码如下:<body> <button>点击跳转页面</button> <div>跳转时间提示</d原创 2020-11-21 11:55:12 · 876 阅读 · 0 评论 -
vue模板快捷设置
原创 2021-01-23 16:50:51 · 268 阅读 · 0 评论 -
v-if 与 v-show的使用场景
v-if与v-show都可以实现隐藏与显示区别在于:前者是整个元素不会在DOM里面显示,而后者只是在元素里加了display的样式。所以在隐藏显示切换很频繁的情况下建议使用v-show性能会更好,反之用v-if会更好...原创 2021-01-31 13:22:24 · 201 阅读 · 0 评论 -
V-bind指令基本用法
V-bind指令:先看效果图:核心思路如下:scirpt核心代码如下:全部代码如下:原创 2021-01-22 16:03:32 · 265 阅读 · 0 评论 -
Vue之v-model的使用
案例:先看效果图:核心代码如下:<body><div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2></div><script src="../Vue_js/vue.js"></script><script> const app = new Vue ({ e原创 2021-02-07 16:20:47 · 58 阅读 · 0 评论 -
computed与methods区别
两个属性都可以定义方法但是,methods里面的方法,在每次调用的时候都会执行一次方法而computed属性里面的方法,不会每次都调用,它会事先检查方法里面的元素是否发生改变,若没有改变它会调用之前调用过方法的结果,所以性能会更好...原创 2021-01-23 18:53:04 · 282 阅读 · 0 评论 -
vue简单购物车案例
效果图:html代码如下:<body><div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <原创 2021-02-01 15:11:56 · 91 阅读 · 0 评论 -
v-on参数问题
原创 2021-01-30 21:54:05 · 72 阅读 · 0 评论 -
块级作用域问题
假设有五个按钮利用for循环遍历这五个按钮点击第i个按钮显示第i个按钮被点击得到的结果却是:每次显示的都是遍历的最后第i个按钮问题的原因:就在于for循环没有作用域解决办法有:加个闭包,因为函数是一个作用域...原创 2021-01-30 14:06:15 · 89 阅读 · 0 评论 -
v-if 登录案例(Vue的虚拟DOM之复用)
v-if实现用户登录和邮箱登录的快速切换:在这种切换模式下会有出现一种问题:当用户在输入框输入数字后若切换了登录方式,则输入框的文本不会被清空,按照往常js的思路是应当被清空的。原因:这是因为Vue在进行DOM渲染之前,会有一个虚拟DOM,出于性能考虑可能会对之前存在的元素复用,而不是重新创建一个新的元素或空间。解决方法:...原创 2021-01-31 13:05:36 · 374 阅读 · 0 评论 -
v-for遍历对象
原创 2021-01-31 13:38:32 · 100 阅读 · 0 评论 -
仿手机发送验证码,并在59秒后重试
放手机发送验证码:先看效果图:核心思路如下:监听事件点击按钮后 按钮不可点击添加定时器:若时间为零 清除定时器 恢复按钮、内容、时间若不为零 更新文本内容 依次减少时间全部代码如下: <div class="box"> 请输入您的手机号码:<input type="number"> <button class="sent">获取验证码</button> </div> &原创 2020-11-20 18:32:43 · 354 阅读 · 0 评论 -
倒计时的实现之设置定时器与清除定时器
定时器的清除和设置:先看效果图:核心思路如下:获取到所有单位的时间,赋值到盒子的内容设定一个空对象setter 作全局变量(方便监听事件调用)结构代码如下: <div class="box"> <button class="start">开始倒计时</button> <span class="days">99</span> 天 <span class="hours">原创 2020-11-20 18:05:34 · 726 阅读 · 0 评论 -
v-bind动态绑定style
动态绑定style:html核心代码如下: <div> <h2 v-bind:style="getStyles()">{{message}}</h2> </div>script代码如下:<script src="../Vue_js/vue.js"></script><script> const app = new Vue ({ el: '#app',原创 2021-01-22 19:42:05 · 73 阅读 · 0 评论 -
router路由默认值和重定向
当进入首页面的时候,希望页面渲染首页的内容,而不是空白的的时候可以在router里面重新重定向配置原创 2021-03-14 14:56:08 · 444 阅读 · 0 评论 -
Vue-v-model与radio组合使用
案例:效果图:核心代码如下:<body><div id="app"> <label for="male"> <input type="radio" id="male" name="sex" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" n原创 2021-02-07 17:02:44 · 228 阅读 · 0 评论 -
路由之细节注意
原创 2021-03-14 20:46:00 · 46 阅读 · 0 评论 -
Vue组件分离写法
或者:原创 2021-02-09 10:20:33 · 264 阅读 · 0 评论 -
Vue组件化的基本使用
效果图:组件化的使用步骤:1、创建组件构造器对象2、注册组件3、使用组件核心代码如下:<body><div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn></div><script src="../Vue_js/vue.js"></script><script> //创建组件构造器模板 con原创 2021-02-08 19:26:34 · 96 阅读 · 0 评论