js
文章平均质量分 94
程序员buddha2080
八零後程序员,技术过硬,诚信专业服务。主营:定制各类网站、app、小程序等企业信息化软件。联系微信:buddha2080
展开
-
html+css+jquery实现轮播图自动切换、左右切换、点击切换
代码如下:效果如下图:需要引入jquery;定时器实现4s自动切换轮播图步骤3:左右切换,左右点击事件手动切换实现代码如下:到目前存在自动切换轮播图,也存在手动切换轮播图。就可能存在手动切换时,又自动切换,客户体验就不太好,可以优化成,手动切换轮播图时,自动切换轮播图关掉,手动切换完成后,又开启自动切换轮播图。优化后,自动切换和左右切换js代码如下:步骤4:点击切换,点击圆点事件手动切换代码如下:html+css+jquery实现轮播图自动切换、左右切换、点击切换,代码如下:原创 2024-02-20 00:03:41 · 3644 阅读 · 0 评论 -
vue脚手架中引入echarts及使用
安装echartsnpm install echarts -S代码示例<!-- Echarts组件 --><template> <div class="container"> <div id="echart"></div> </div></template><script> import echarts from 'echarts' export d原创 2020-09-21 16:29:00 · 1160 阅读 · 0 评论 -
vue父子组件——作用域插槽
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <slot :data="list"></slot> </div></template><script> export default { data() { retu原创 2020-09-21 15:52:37 · 405 阅读 · 0 评论 -
vue父子组件——具名插槽
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <slot name="up"></slot> <slot name="down"></slot> </div></template><!-- 父组件 --><te原创 2020-09-21 15:32:18 · 447 阅读 · 0 评论 -
vue父子组件——匿名插槽
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <slot></slot> </div></template><!-- 父组件 --><template> <div class='container'> <原创 2020-09-21 15:25:33 · 110 阅读 · 0 评论 -
vue父子组件——$refs
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> </div></template><script> export default { name: 'Child', methods: { btn() { c原创 2020-09-21 14:45:29 · 364 阅读 · 0 评论 -
vue父子组件——$emit()事件
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <button @click="btn">按钮</button> </div></template><script> export default { name: 'Child',原创 2020-09-21 14:26:38 · 759 阅读 · 0 评论 -
vue父子组件——传递数据
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> {{ name }} </div></template><script> export default { name: 'Child', props: { name: {原创 2020-09-21 14:12:04 · 80 阅读 · 0 评论 -
SKU规格列表
商品详情添加,实现多销售属性的组合。比如添加衣服的商品详情,那么衣服的销售属性有颜色、尺寸。假如颜色有红色、白色,尺寸有S、M。那么就存在四种组合情况(红S、红M、白S、白M)下面是vuejs中,实现这种组合方式的demo<template> <div> 规格列表 </div></template><script> export default { data() { return {原创 2020-09-18 17:03:35 · 2257 阅读 · 0 评论 -
axios二次封装,达到前端架构多人协同开发,很强扩展性
前言:此接口封装是借鉴多位牛人代码提炼出来的,但是还存在考虑不周的地方,请大家多多指教贴出代码前,解释下代码,用编号1、2、3等来说明编号1应用到axios、vuex、router以及element-ui的提示编号2罗列使用到的接口,满足多接口使用编号3是示例管理员的接口封装编号4是对很多个编号3接口的统一出口编号5是vue脚手架统一入口引入编号6是使用接口的示例1. http.js代码/** * src/utils/http.js *//** * axios封装 * 请求拦截、原创 2020-08-28 09:47:08 · 252 阅读 · 0 评论 -
vue做前端,thinkphp6做后台,项目部署
前后端分离开发完毕打包后,面临上线部署问题,一种做法是前后端分开来部署。前端nginx服务器配置反向代理;另外一种做法是把打包好的前端代码放置ThinkPHP框架Public目录下,默认访问index.html即可location /admin/ { proxy_set_header Host $proxy_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_原创 2020-08-25 14:10:32 · 2555 阅读 · 2 评论 -
vue前后端分离开发解决跨域的问题
开发时配置vue.config.js解决跨域module.exports = { devServer: { port: 8080, host: "0.0.0.0", https: false, // 协议 open: true, // false 启动服务时自动打开浏览器访问 proxy: { '/admin': { target: "http://admin原创 2020-08-25 13:59:23 · 465 阅读 · 0 评论 -
12-设置请求头参数的ajax请求
demo如下:<html><head> <meta charset="utf-8"> <title>request</title></head><body><button onclick="btn()">按钮<原创 2019-02-18 10:58:10 · 384 阅读 · 0 评论 -
11-Iterable迭代器
1. Iterable1. 遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。2. 为了统一集合类型,ES6标准引入了新的iterable类型 Array、Map和Set都属于Iterable类型。3. 具有iterable类型的集合可以通过新的for ... of循环来遍历2. 检测浏览器是否支持Iterable<script>...原创 2018-06-14 14:26:02 · 213 阅读 · 0 评论 -
01-js介绍
1. js介绍JavaScript常简称为JSJavaScript是Web的编程语言所有现代的HTML页面都使用JavaScript常用来做数据验证和网页特效原创 2018-06-12 14:15:48 · 122 阅读 · 0 评论 -
02-js用法
1. 直接写在script标签对中<script> alert('hello world');</script>2. 通过事件的方式写js代码<body> <button onclick="test()">按钮</button></body><script&原创 2018-06-12 14:16:47 · 123 阅读 · 0 评论 -
03-调试方法
1. alert弹窗,会中断代码执行<!DOCTYPE html><html><head> <title>js</title> <meta charset="utf-8"> <style> #box { width: 1原创 2018-06-12 14:17:42 · 219 阅读 · 0 评论 -
04-基本语法
1. 语法1. 每个语句以 ; 结束,虽然书写代码时不强制,但是语法在解析时会自动补上2. 语句块用 { } 括起来,里面的代码缩进4个空格,虽不强制缩进,但方便理解代码层次 2. 注释// 单行注释/* 多行注释*/3. 大小写javascript严格区分大小写,如大写和小写的变量名称,完全就是两个变量了...原创 2018-06-12 14:18:32 · 380 阅读 · 0 评论 -
05-数据类型和变量
1. 数据类型Number类型 包括整数、浮点数、科学计数法、负数、NaN(没有数)、Infinity(无限大) 0xff00:表示的是一个十六进制数字符串 以单引号或双引号引起来的任意文本 'hello world' "hello world"布尔值 true false 通过逻辑运算,&& || ! 得到一个...原创 2018-06-12 14:19:42 · 102 阅读 · 0 评论 -
06-js字符串
1. 转义字符\' '\n 换行\t 制表符\\ \\x## 表示ASCII\u#### 表示一个Unicode字符案例1:<script> var str = 'I\'m a 帅哥'; console.log(str);</script>案例2:<script...原创 2018-06-12 15:19:11 · 107 阅读 · 0 评论 -
07-数组
1. 数组概念一组按顺序排列的有序集合,集合的每个值称为元素,元素可以是任意的数据类型 数组用[]表示,元素间用逗号(,)分割 通过 数组名[下标] 来访问每个元素案例说明<script> var arr = [1, 1.2, 'oh', NaN, [3, 4], {'name': 'rulai'}]; console.log(arr...原创 2018-06-12 23:37:46 · 137 阅读 · 0 评论 -
08-对象
1. 对象的概念用户描述现实世界中的万千世界一组由键值对组成的无序集合键的数据类型都是字符串,值可以是任意数据类型案例说明<script> var xiaoming = { name: 'xiaoming', height: 179, weight: 85 }; console.log(xi...原创 2018-06-13 15:19:18 · 114 阅读 · 0 评论 -
09-基本结构
1. 顺序结构1. 程序中的各个操作是按照它们在源代码中的排列顺序依次执行的2. 选择结构1. 根据某个特定的条件进行判断后,选择其中一支执行;2. 分为:单项选择、双选选择和多项选择;2.1 if语句选择结构<script> var i = 20 if(i > 10) { console.log('...原创 2018-06-13 19:32:19 · 213 阅读 · 0 评论 -
10-Map和Set
1. 检测浏览器是否支持Map和Set语法<script> 'use strict'; var m = new Map() var s = new Set(); console.log('你的浏览器支持Map和Set')</script>2. Map用法2.1 概念Map是一组键值对的结构,具有极快的查找速度...原创 2018-06-14 14:25:23 · 113 阅读 · 0 评论