JavaScript
文章平均质量分 77
yanwuhc
实践出真知。
展开
-
Vue | 带有左右点击按钮可控制滑动的列表
效果功能点大概有如下两个功能点:列表横向排列点击左右两个按钮可以左右移动每个item(附加动画)思路列表横向排列可以使用flex布局解决,主要逻辑在左右滑动的控制上面。在样式上来看,左右滑动其实可以看成:改变position为relative时属性left值。具体分析如下:如上图,蓝色为外层div,红色为内层div。内层div装有列表的各项item,所以它的宽度可能会大于外层div的宽度。外层div采用定宽,同时设置overflow: hidden,使内层div突出的部分隐藏起来原创 2022-04-03 23:59:50 · 8510 阅读 · 4 评论 -
JS继承常见的几种方式
原型链继承原型继承很简单,就是将子类的原型挂在到父类对象上。// 一个父类function Father(){ this.name = "xhc", this.age = 21, this.hobbies = [] // 引用类型属性}// 父类原型上的属性/方法Father.prototype.getAge = function(){ console.log(this.age)}// 一个子类function Child(){}Child.prototype = n原创 2021-08-14 20:21:52 · 104 阅读 · 0 评论 -
笔记 | webpack的更多用法
下面记录一下关于webpack的几个更多的使用方法。(1)对于module.exports={ mode:'development',}在ES6中的写法是:export default{...}导入的时候是:import ... from 'id'(2)对于前一篇文章所述,每当我们修改原来的js文件之后,总是需要使用 npm run dev来对main.js进行更新,显然是很繁琐的事情。对于这个问题,可以有下面的解决方法。在终端输入指令,安装webpack-dev-serve原创 2020-09-13 22:23:12 · 94 阅读 · 0 评论 -
webpack结合VScode的基本使用方法
先打开vscode,打开项目文件夹,同时打开终端。输入代码npm init -y进行初始化。初始化完成后,会出现一个叫package.json文件,里面有相关配置信息。因为这是一个前端项目,所以需要创建一个src文件夹,同时创建相关的html、css、JavaScript文件。并写入自己的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2020-09-13 21:10:16 · 1598 阅读 · 1 评论 -
小经验 | 解决关于使用了position:relative后的高度或者宽度的调整问题
今天写代码的时候发现,某一个元素设置了height属性为默认的auto,但高度不在自己预期之中。如下图,最底部多了很大一片空白。将相关的元素设置border属性(用于调试),但一直找不到是哪里的问题。直到用谷歌调试一下,发现这个东西。感觉这一个元素的高度刚好就是下面多出来的高度。后来我才忽然想起,原来右边的元素(表格)定义了position:relative属性。position:relative–相对于本来的位置进行定位,同时不脱离文档流。所以,中间的box高度实际上应该是左边元素高度+右边原创 2020-09-13 00:25:17 · 7071 阅读 · 1 评论 -
笔记 | ECMAscript6 基本语法
ECMAscript 6 基本语法1.变量var(1)可以重复声明(2)无法限制修改(3)没有块级作用域let(变量)(1)不能重复声明(2)变量-可以重复修改(3)有块级作用域const(常量)(1)不能重复声明(2)常量-不能重复修改(3)有块级作用域解释一下块级作用域:使用var和function定义的变量a和方法test可以在大括号外边被访问,而使用let和const定义的变量和常量无法在大括号外面被访问。{ var a = 1; let b = 2;原创 2020-09-09 22:23:50 · 169 阅读 · 0 评论 -
用JavaScript实现瀑布流布局的效果(附源码)
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。——摘自百度百科“瀑布流”制作瀑布流布局,首先需要准备几张图片,将其放置在html页面中。<head> <meta charset="utf-8"> <title>瀑布流练习</title> <link rel="stylesheet" type="text/css" hr原创 2020-07-24 16:53:22 · 662 阅读 · 0 评论 -
JavaScript事件、事件对象
JavaScript 使我们有bai能力创建动态页面。事件是可以被 JavaScript 侦测到zhi的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。JavaScript里的事件有很多, 主要分为两种:一种是由人触发的,比如鼠标单击、双击、移动鼠标、在输入框输入文本等等都会触发这类事件, Javascript通过监视这些事件,可以知道用户在网页里干什么,好做出不同的交互反馈。第二种是由浏原创 2020-07-23 17:18:22 · 159 阅读 · 0 评论 -
JavaScript BOM对象模型
BOM即 浏览器对象模型(Browser Object Model)浏览器对象包括Window(窗口)Navigator(浏览器)Screen (客户端屏幕)History(访问历史)Location(浏览器地址)1.Window对象(1)获取文档显示区域的高度和宽度。一旦页面加载,就会自动创建window对象,所以无需手动创建window对象。通过window对象可以获取文档显示区域的高度和宽度。通过调用innerWidth和innerHeight获取。(注意,不能加括号!!不是一个原创 2020-07-23 17:00:15 · 100 阅读 · 0 评论 -
JavaScript DOM操作
JavaScript DOM操作DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面、窗口和文档。关于DOM更详细的说明下面主要是关于如何用DOM操作对象改变样式或者属性。1.DOM操作HTML(1)改变HTML输出流:注意不要在文档加载完成之后使用document.write()。会覆盖该文档。(2)寻找元素:通过id找到HTML元素。通过标签名找到HTML元素。(3)改变HTML内容:使用属性innerHTML(4)改变HTML原创 2020-07-22 12:15:05 · 104 阅读 · 0 评论 -
笔记 | JavaScript语言基础
JavaScript语言基础 笔记整理JavaScript用于网页和用户之间的交互,比如提交的时候,进行用户名是否为空的判断。1.Hello JavaScript<script> document.write("Hello Javascript");</script>document是javascript的内置对象,代表浏览器的文档部分document.write(“Hello Javascript”); 向文档写入字符串2.JavaScript与DOM结合的例子原创 2020-07-22 12:03:06 · 125 阅读 · 0 评论 -
demo | 用JavaScript写一个简易的计时器,实现开始计时、暂停计时、继续计时、重置的功能。
今天学到了JavaScript的计时对象模型,于是心血来潮,想做一个简单的计时器。下面是最终的代码。在这里插入代码片原创 2020-06-10 01:34:09 · 2955 阅读 · 0 评论 -
JavaScript中,Number()和parseInt()的区别
Number()和parseInt()都可以将非数字类型为数字类型。对于二者的区别,用字符串类型和非字符串类型转换进行解释。【对于字符串类型转换为数字类型】使用Number()转换的时候,对于字符串而言,如果转换的字符串不是纯数字,包含字母或者其他,则直接返回NaN。使用parseInt()转换的时候,需要看情况。如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN。<script> document.write("通过Number() 函数转换字符串'12原创 2020-05-30 14:40:47 · 1185 阅读 · 0 评论