
web前端开发
文章平均质量分 88
webshitian
这个作者很懒,什么都没留下…
展开
-
async和await
上一篇文章promise的使用的需求还没有写完。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-10-13 14:46:13 · 431 阅读 · 2 评论 -
Promise的基本使用
通过一个例子引出Promise对象**提出一个需求:**投一个硬币,如果是正面的时候,提出表扬,如果是反面的时候,提出批评**分析:**条件:1.正面 2.反面由于提出表扬和惩罚都是投硬币的结果出来之后,表扬和惩罚有一个等待的过程,因此是异步的,奖励和惩罚提出来后不马上执行,需要投硬币的结果出来之后再执行下面用定时函数描述异步代码:<!DOCTYPE html><h...原创 2019-10-12 18:19:46 · 219 阅读 · 1 评论 -
复合选择器--总结
常用的复合选择器:1.后代(使用频率90%-95%)2.子代3.并集4.交集5.链接伪类选择器6.结构伪类选择器7.属性选择器如何利用选择器去选择器元素1.确定我们要选择的元素2.从HTML结构中根据我们确定的元素,找这个元素的父辈元素3.根据父辈元素来选择使用哪一个选择器(一定只能是给当前选择的元素添加样式,不要给其他的元素添加样式,要精准选择)后代选择器: 选择...原创 2019-06-27 19:30:47 · 1009 阅读 · 0 评论 -
利用js判断屏幕的大小来进行不同页面效果布局
判断屏幕的大小功能:主要是辅助你进行响应式布局的时候,方便你在不同的屏幕大小的时候设置不同的效果。(一般在响应式布局的时候用)响应布局屏幕的参数:xs(小于768px) width:autosm(大于等于768px) width:720+槽宽md(大于等于992px) width:940+槽宽lg(大于等于1200) width:1140+槽宽如下图所示,可以看到浏览器显示页...原创 2019-07-22 19:57:34 · 3482 阅读 · 0 评论 -
仿苏宁易购鼠标点击搜索框提示信息
我们先看一下苏宁易购搜索框部分的效果:鼠标没有点击搜索框时显示的效果:鼠标点击搜索框后的效果:我们先看一下运行的效果,这里不会做出与苏宁一模一样的,只是实现一下苏宁搜索框这种效果的逻辑。运行代码显示效果。鼠标点击搜索框的时候,显示出提示盒子也就是提示的信息当你的鼠标移出搜索框外面的时候,盒子就会隐藏起来下面直接上代码:<!DOCTYPE html><ht...原创 2019-08-01 19:10:11 · 401 阅读 · 0 评论 -
mouseover鼠标移入,mouseout鼠标移出与mouseenter 鼠标移入,mouseleave 鼠标移出的区别
mouseover实现鼠标移入的效果代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-08-10 21:59:18 · 967 阅读 · 0 评论 -
node.js中cookie的介绍
首先我们先了解一下http的无状态HTTP协议不能记住用户的操作,在他看来用户每一个请求都是独立 的,没有任何关系的随着动态网站的发展,我们在执行某个操作的时候需要基于之前操作的结果,意味着我们有必要将之前的用户数据存储,方便后续操作使用,因此cookie由此产生了cookie的特性只能存储字符串它是浏览器的默认行为:浏览器会自动的接收和传递它是存储在浏览器的物理空间–相...原创 2019-09-07 17:34:13 · 234 阅读 · 0 评论 -
NodeList 和 HTMLCollection对象的区别
**数组:**可以调用数组自身的方法。proto__处的值为Array伪数组:具备数组的一些属性,但是不能调用数组自身的方法(虽然不能调用自身的方法,但是我们可以把伪数组赋值给一个变量,通过变量调用伪数组自身的方法)。__proto__处的值不是Array。我们先设置两个查找元素的方法然后输出:我们可以看到通过querySelectorAll和getElementsByClassNam...原创 2019-08-03 20:29:19 · 611 阅读 · 0 评论 -
forEach ,filter,some三个循环遍历方法的区别
forEach上代码:var nums = [10,20,30,40,50,60,70,80,90]; var res = nums.forEach(function(item,index){ if(item==60){ return; } console.log(item+...原创 2019-08-14 19:54:21 · 774 阅读 · 0 评论 -
基础选择器-总结
选择器:用来选择要设置样式的元素的一种方式作用:在一推的元素中选择出我们要设置样式的那一个或者几个基础(简单)选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器标签选择器:css语法:选择器{属性:属性值 } 标签选择器:将标签的名称作为选择器的名字的这样的选择器称为标签选择器缺点:1.将页面中同一类标签设置相同的样式,没有差异化类选择器:css的...原创 2019-06-27 19:23:09 · 332 阅读 · 0 评论 -
Axure 7.0实现图片轮播详细步骤
效果图:在线连接:https://3802ue.axshare.com** 轮播部分详细步骤**轮播部分的效果一共分为:滚动界面动画、制作画面中的白色椭圆与画面绑定和为图片设置超链接三个部分。第一部分滚动界面动画1、我们先导入一张图片到工作区,鼠标右键选择“转化为创建动态面板”。右键点击状态1创建新增状态,在每个状态下添加一张图片,我这里就以4个状态为例。单击动态面板在面板状态...原创 2019-06-05 01:21:59 · 614 阅读 · 0 评论 -
vue仿去哪儿网站的图片轮播问题
我之前按照去哪网这个项目的教程做,最后发现不能轮播图部分不能自动轮动。原来的代码<template> <div class="wrapper" > <swiper :options="swiperOption" v-if="showSwiper" > <swiper-slide v-for="i...原创 2019-05-27 20:27:02 · 300 阅读 · 0 评论 -
面试题-js冒泡排序并倒序输出来
前一周面试的时候遇到了一道简单的冒泡排序题问题是这样的!题目:请用js实现对一个数组进行冒泡排序,并倒序输出来!<script type="text/javascript"> var examplearr=[23,9,78,6,45];//声明需要排序的数组 function arrSort(arr){//编写冒泡排序的方法 ...原创 2019-05-27 21:05:51 · 1561 阅读 · 0 评论 -
IE6向左(右)浮动双倍边距bug
什么是IE6的双倍边距bug?在IE6中,当为一个向左浮动的元素设置左外边距或者为一个向右浮动的元素设置右外边距时,这个外边距将会是设置的值的2倍。通俗一点就是普通浏览器的左(右)外边距在IE6中的显示的效果是双倍,比如下图所示:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2019-05-30 18:12:41 · 529 阅读 · 0 评论 -
实现ajax局部异步刷新的基本步骤
ajax的定义:Ajax是一个异步的javascript请求,用来获取后台服务端的数据,而不是整个页面进行跳转。实现ajax的四个步骤:1.创建XMLHttpRequest对象2.准备发送网络请求3.开始发送网络请求4.指定回调函数我们先新建一个给ajax校验的php文件。内容如下所示:<?phpecho "<div style ='color:red;'>恭喜...原创 2019-06-06 01:40:23 · 1143 阅读 · 0 评论 -
template.js模板引擎下载和实例
定义:art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器下面是一个实例:我们通过模拟这个data数据是从服务器获取的数据,然后通过template 这个模板引擎渲染出来!第一步:我们把html基本页面写好。<!DOCTYPE html>&l...原创 2019-06-06 16:03:41 · 6162 阅读 · 8 评论 -
ajax+template.js实现天气预报查询
准备的文件如下:template.js文件下载链接:https://pan.baidu.com/s/1FOcJehGQCBfdi5fxIJjVnQ提取码:62injquery-1.4.2.min.js文件链接:https://pan.baidu.com/s/1jm8wELdaid0cGFgk66UiKA提取码:6gvc天气api接口网站:https://www.kancloud.c...原创 2019-06-06 16:53:33 · 785 阅读 · 1 评论 -
vue的入门知识点
vue小例子的步骤:1.引入Vue.js2.创建Vue对象el :指定根element(选择器)data :初始化数据(页面可以访问)3.显示数据:{{xxx}} (大括号表达式:读取data中数据显示)下面是小例子的代码<html lang="en"><head> <meta charset="UTF-8"> <title...原创 2019-06-08 17:16:40 · 123 阅读 · 0 评论 -
vue.js的v-html和v-text的区别
{{}}插值表达式 把{{}}里面的值插入包含它的标签里面的!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue</title> <script src="vue.js"></script...原创 2019-06-08 22:09:31 · 5311 阅读 · 2 评论 -
简单用table标签实现携程导航页的布局
简单用table标签实现携程导航页的布局携程原图效果图实现的几个要点:1.有两个对齐。第一行和第五,第六行对齐。第二,三,四行对齐。2.第二,三,四行有特定的颜色填充,而且外框是白色隔开 。方法:为了实现这个效果。我们主要使用了table标签加样式来完成!、代码部分<!doctype html>首页 <...原创 2019-05-27 19:45:39 · 1192 阅读 · 0 评论