![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
沉默的小猴子
这个作者很懒,什么都没留下…
展开
-
VUE组件封装之短信验证码组件
贴上代码,<template> <div> <msg-code v-model="smsPwd" :msgTitle="'验证码'" :disabled="false" :placeholder="placeholder" :maxlength="'6'" :text=.原创 2020-10-19 10:57:55 · 922 阅读 · 0 评论 -
VUE正确使用JS获取scroll的高度
vue中scroll的高度问题解决很多人写的并不全面,给出的只有简单的一两句写法,导致萌新和小白频频报错解决不了。贴上多数文章的写法:console.log('距离顶部高度', this.$refs.scroll1.offsetTop)console.log('距离顶部高度', this.$refs.scroll1.getBoundingClientRect().top)这样的写法是没问题的。但是这个**this.refs.scroll1∗∗指的是哪个元素,没有说明。还有这句∗∗console.原创 2020-07-21 09:31:00 · 2734 阅读 · 0 评论 -
VUE中post给接口传递参数异常的解决办法(持续更新)
VUE中post给接口传递参数异常的解决办法(持续更新)本文持续更新,目前列举本人遇到的问题:使用this.axios.post(/xxxx, {params:{data:xxxx}).then这种方式,偶尔会遇到如下:这种会导致后端接收到的参数都是空的。因为**params[参数名字]**出现了异常。解决:1. JSON.stringify(params)。这种并不是很可靠。因为...原创 2019-12-16 09:10:09 · 4299 阅读 · 0 评论 -
用JS写一个网站树形菜单
先上效果图:主体内容就是侧边展示的一二三级菜单,树形结构的。前端页面布局内容,页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级:&lt;body&gt; &lt;b&gt;&lt;img src="images/fold.gif"&gt;树形菜单:&lt;/b&gt; &l原创 2018-11-08 15:06:25 · 10988 阅读 · 1 评论 -
使用JS写一个计算器
先上效果图:简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能。根据预期效果,可以确定页面中的布局要用到table tr td。所以先放上页面布局,table的边框宽度border,colspan来设置某一行的宽度为4倍一列宽度,显示结果的地方要显示输入的所有值,先用id来区分,给value一个空,来获取其他按钮键入的value值,用name来命名:<body> ...原创 2018-11-08 15:27:23 · 20201 阅读 · 4 评论 -
原生JS写表单验证提交功能
先上效果图:表单的基础内容就是昵称判断、手机号判断、邮箱判断、身份证号码判断,这里是用到正则验证检验格式。页面的表单写法就是一个form的提交。输入框用input来实现,输入内容用value来获取。每个输入框用唯一的ID名字来标记:<body> <div class="content"> <div class="title">用户注册<...原创 2018-11-08 15:45:27 · 4587 阅读 · 0 评论 -
vue+element-ui项目前端报错 date.getHours is not a function解决方法
解决方法有两种:一、先看组件内容是否有错;官方原生默认组件内容:注意type为datetime<span class="demonstration">默认</span><el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-...原创 2019-05-30 08:50:29 · 21267 阅读 · 2 评论 -
VUE+element开发后台管理的搜索功能
先看看样式图:实现上面这种简单搜索简单的三步走:1.页面样式:在页面中使用form表单的校验功能来实现输入搜索。给表单的数据放入搜索请求的data数组中,也就是searchParams这个大集合中。备注:如果给每个输入框添加了搜索按钮的click方法,则会在输入完成后直接执行列表搜索。所以考虑自己使用的具体位置。<div class="search"> <el-...原创 2019-06-11 16:48:41 · 13384 阅读 · 2 评论 -
VUE简单解决控制台打印数组为空,但是展开有数据
如图,在控制打印的时候数组是空,但是展开可以看到有37条数据。紧接着打印了长度,长度为0.这个问题我搜了很多解决都是this.$nextTick(() => { })我有个更简单的办法,这个算是异步的一个加载那就使用延时setTimeout来触发let rightItems = this.$refs.r_list.getElementsByClassName('proLi...原创 2019-08-09 17:44:16 · 16172 阅读 · 3 评论 -
vue开发web端实现列表左右联动效果
先谈需求:左侧为分类列表,点击分类名右侧商品列表会滑动对应分类到顶部;右侧商品列表滑动到某一分类时左侧分类列表对应分类会滑动到顶部高亮显示。再来说说思路:1,引用swiper插件,这种方法冲突和不适配可能性太多,会越改越麻烦所以弃用。2,使用页面滑动scroll事件,引入better-scroll组件。这个较为轻便,可自定义性较大,可以使用。实现步骤:1,左右两侧均使用v-for循环列表,使...原创 2019-08-13 09:58:08 · 8008 阅读 · 0 评论 -
JS写一个漂亮的音乐播放器
先放上效果图:正如图中所展示的播放器那样,我们用HTML+CSS+JS将这个效果实现出来。HTML页面布局<div class="music"> <div class="photo"> <div class="photo_pic" id="photo_pic"><img src="" width原创 2018-11-08 14:15:59 · 5845 阅读 · 0 评论 -
AJAX的get表单请求方式简述
一般在页面中常用在表单的操作中,请求数据,action : 数据提交的地址,默认是当前页面method : 数据提交的方式,默认是get方式get:把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面enctype : 提交的数据格式,默认application/x-www-form-urlencoded<...原创 2018-11-09 09:43:00 · 433 阅读 · 0 评论 -
AJAX的表单请求POST请求方式
表单数据的提交action : 数据提交的地址,默认是当前页面method : 数据提交的方式,默认是get方式post:把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面enctype : 提交的数据格式,默认application/x-www-form-urlencoded<body> ...原创 2018-11-09 09:50:44 · 3263 阅读 · 4 评论 -
AJAX的兼容处理方式
AJAX在网站服务中使用到频率很高,也需要考虑各个浏览器版本的兼容性,本示例中详细介绍简单快捷的处理兼容性问题。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>AJAX原创 2018-11-09 10:21:16 · 917 阅读 · 0 评论 -
AJAX封装数据处理简单操作
数据的封装处理主要展现在JS中,在页面里面引入封装的JS,“js/ajax.js”简单封装将get和post方法都写入,get的方法和post的方法依然需要严格区分,包括type类型也要严格书写:function ajax(method, url, data, success) { //命名方法 var xhr = null; try { xhr = new XMLHttpRe...原创 2018-11-09 11:14:59 · 445 阅读 · 2 评论 -
JS操作DOM节点查找
JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找。<script>window.onload = function(){ //children 与 childNodes console.log( document.body.children ); //包含7个节点的数组 console.log( document.bod...原创 2018-11-09 16:31:00 · 2080 阅读 · 0 评论 -
JS中的鼠标移入移除监控操作
有些时候我们需要通过页面来监控用户的行为,包括鼠标操作键盘操作,本文章介绍的是鼠标的操作监控:<script> window.onload = function(){ var oDiv = document.getElementById("myDiv"); //拖拽 oDiv.onmousedown = function(ev){ var ev = ev || wind...原创 2018-11-09 16:35:13 · 1323 阅读 · 3 评论 -
JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图:实现用户留言内容,留言具体时间。<script> window.onload = function(){ var oMessageBox = document.getElementById("messageBox"); var oInput = document.getElementById("myInput"); ...原创 2018-11-09 16:41:22 · 2786 阅读 · 0 评论 -
extjs开发———用extJS简单写一个饼状图
先上效果图:js编写部分简单如下,先插入一个模块,然后给模块中添加内容。var myChart1 = echarts.init(document.getElementById('myChart1'));option = { title: { text: '会员通过率', x: 'center', }, tooltip: { trigger: 'item...原创 2018-11-08 09:53:36 · 618 阅读 · 0 评论 -
JS写一个旋转木马的视频播放效果
JS以及JQ的功能很强大,可以做出很多的优秀效果。今天给大家分享一个我之前写网站用到的旋转木马效果。大概效果图就是这样的,上面的视频播放是旋转木马效果。下面的音乐播放效果放在下一篇内容里面讲。直接先上页面布局写法:<div class="swiper-container"> <div class="swiper-wrapper"> <div class...原创 2018-11-08 11:34:11 · 500 阅读 · 0 评论 -
JS的数据类型、常量、变量、以及基本对象的知识总结
第一部分、JS的常见数据类型,特别要注意的是JS中大小写要求很严格,一定要注意字段大小写。1.字符串(String) 举例:var cellname = "Bill Gate";或者 var cellname = 'Bill Gate';2.数字(Number) 举例var x1 = 32.00; //使用小数点来写var x2 = 32; //不使用小数点来写极大或者...原创 2018-09-11 09:02:16 · 561 阅读 · 0 评论