2021年01月_meichaoWen

原创【JavaScript】原生js事件中事件绑定、磁性吸附，以及拖拽选中文字的结决方案

事件绑定<script> window.onload = function () { var oDiv = document.getElementById('btn') if (oDiv.attachEvent) { //低版本的 ie oDiv.attachEvent('onclick', function () { alert(a) }) oD

2021-01-28 21:39:55 279

原创【JavaScript】原生js中默认行为以及拖拽实例的实现原理

默认行为阻止页面上点击右键弹出菜单的默认行为<script> document.oncontextmenu = function(){ return false; //阻止默认事件 }</script>实例1、自定义右键菜单<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

2021-01-27 00:52:33 176

原创【JavaScript】关于原生js中的事件-Event对象、事件冒泡、鼠标事件、键盘事件

Event对象<script> window.onload = function(){ document.onclick = function(ev){ var oEvent = ev || event //为了兼容低版本的ie和火狐 alert(oEvent.clientX +','+ oEvent.clientY) } }</script>事件冒泡在

2021-01-25 22:35:47 348

原创【Vant】如何在Html5中应用Vant前端框架，组件不显示问题

通过cdn引入框架在做 h5 单页面的时候，有遇到这个问题。查看文档，最初以为通过 cdn 引入框架，个别组件不支持，后来发现是这个问题。

2021-01-24 22:22:13 1983

原创【git】cherry-pick 方式合并代码，遇到冲突怎么办

操作思路git cherry-pick 版本号1git cherry-pick 版本号2//遇到冲突，需要手动解决冲突，然后 add、commitgit cherry-pick 版本号3//检查代码有无问题没有问题 git push origin master待验证git cherry-pick 版本号1 版本号2 版本号3…//遇到冲突，需要手动解决冲突，然后 add、commitgit cherry-pick --continue //意思是继续合并，因为遇到代码冲突.

2021-01-20 15:16:20 2415

原创【JavaScript】用原生js来实现链式运动以及同时执行多种运动

链式运动框架function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name] } else { return getComputedStyle(obj, false)[name] }}function startMove(obj, attr, iTarget, fnEnd) { clearInterval(obj.timer) obj.timer = setInterval(

2021-01-19 23:47:37 182

原创【JavaScript】用原生js实现幻灯片效果

github地址：https://github.com/MeichaoWen/JSInstance<script> function getByClass(oParent, sClass) { aEle = document.getElementsByTagName('*'); var arr = []; for (var i = 0; i < aEle.length; i++) { if (aEle[i].className == sClass) { a

2021-01-18 23:29:21 504 3

原创【JavaScript】select、radio、checkbox 选中与获取值

判断是否选中<body> <input type="checkbox" id="oCh"> <script> //jQuery $('#oCh').is(':checked') //false、true $('#oCh').prop('checked') //false、true $('#oCh').attr('checked') //jQ版本1.6+返回 undefined、checked

2021-01-16 22:27:44 177

原创【JavaScript】原生js实现多个元素运动、一套运动框架改变任意样式

多个元素运动注意：多个元素，定时器需要多个。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {width: 50px;height: 50px;back

2021-01-15 21:26:02 306

原创【JavaScript】用原生js来实现元素的缓冲运动

缓冲运动缓冲运动是指，运动物体的速度由快到慢，逐渐停止。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 {width: 200px; height:

2021-01-13 23:47:20 185

原创【JavaScript】用原生js来实现元素的匀速运动

运动基础运动实际上就是改变一个定位元素的 top、left…<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 {width: 200px; heigh

2021-01-12 23:47:47 467

原创【JavaScript】用原生js来实现表格中多关键词搜索、排序功能

多关键词搜索

2021-01-11 16:01:43 802 4

原创【JavaScript】原生js中用DOM操作table以及表格搜索功能

DOM中table的便捷操作tBobies(数组) tHead tFoot rows(行) cells(单元格)<body> <table border="1" id="table1" width="500"> <thead> <tr> <td>ID</td> <td>姓名</t...

2021-01-10 22:48:20 1017 2

原创【JavaScript】原生js中DOM操作之元素创建、插入和移除

创建元素<body> <input type="text" id="txt1"> <input type="button" id="btn1" value="创建"> <ul id="ul1"> </ul> <script> window.onload = function () { var oUl = document.getElementById(

2021-01-09 10:16:28 1902

原创【JavaScript】DOM基础之节点、以及通过className获取元素

节点

2021-01-08 22:34:45 613 4

原创【JavaScript】一篇弄懂offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent

offsetWidth、offsetHeightoffsetWidth：元素的布局宽度。offsetHeight：元素的布局高度。offsetWidth、offsetHeight 的计算：width/height + padding + border-width，受 box-sizing 影响。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.

2021-01-07 22:03:20 315

原创【JavaScript】用原生js实现无缝滚动的实例

无缝滚动功能：向左滑、向右滑、鼠标移入滑动暂停、鼠标移出滑动继续。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {padding: 0; margin:

2021-01-07 00:42:19 273

原创【JavaScript】原生js中的定时器以及如何在实例中应用

定时器setInterval：间隔型setTimeout：延时型<body> <input type="button" value="开启" id="btn1"> <input type="button" value="关闭" id="btn2"> <hr> <ol> <li>setInterval: 间隔型定时器</li> <li&gt

2021-01-05 23:56:49 571

原创【JavaScript】原生js中函数传不定参以及获取非行间样式的方法

函数返回值函数返回值：就是函数的执行结果function abc(){ return 12; //abc() 等于12 return; //abc() 等于 undefined //函数内容为空，abc() 等于 undefined}函数传不定参<script> function sum(){ var result = 0; //arguments 是一个由参数组成的数组 for(var i = 0; i.

2021-01-05 00:25:47 331 2

原创【JavaScript】原生js中运算符以及流程控制

运算符算数：+ 加、- 减、* 乘、/ 除、% 求模赋值：=、+=、-=、*=、/=、%=关系：>、<、 >=、 <=、 ==、 ===、 !=、 !==逻辑：||或、&&与、!否实例1、求模window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0}实例2、隔行变色<body> <ol&gt

2021-01-03 22:58:36 1112 8

原创【JavaScript】原生js基本数据类型以及数据类型转换

组成部分ECMAScript：是js中的核心，扮演解释器的作用。DOM: （document object model）作用是操作HTML，对象是 document。BOM：（browser object model）作用是操作浏览器，对象是 window。基本数据类型<body> <ol> <li>基本数据类型：number、string、boolean、function、object、undefined</li&

2021-01-03 00:45:42 307

原创【JavaScript】原生js中变量的作用域以及字符串连接

一个简历日历的实例。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #d.

2021-01-01 23:11:45 212

原创【JavaScript】原生js中this的应用以及如何实现选项卡实例

用原生js实现选项卡效果。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 div { width: 300px; .

2021-01-01 00:30:13 196

Owen的博客