前端

css3 颜色过渡以及阴影

背景颜色过渡: background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 阴影: box-shadow:color h-shadow v-shadow blur spread inset; color:阴影颜色 ------------ 可选 h-shadow :水平偏移量 ----必选 v-shadow:垂直偏移量-----必选 blur:模糊距离 -------------可选 spread:阴影尺寸---------- 可选 inset:内阴影 --------------可选 box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影 box-shadow: darkgrey 0px 0px 30px 5px inset;//边框内阴影 h-shadow(水平):指定水平偏移阴影。正值(即:5px)阴影向右,而为负值(即:- 10px)将使它偏向左。 v-shadow(垂直):指定垂直偏移阴影。正值(即:5px)会使阴影在框的底部,而负值(即:- 10px)将使它偏向上。 blur(模糊):设置的柔化半径。默认值为0,这意味着没有模糊。正值增加了模糊,而负值,实际上缩小了阴影。此属性默认为0。 color(颜色):颜色值,也就是设置阴影颜色。

ArcGIS API for JavaScript 4.9学习笔记一(创建2D/3D地图)

ArcGIS API for JavaScript 4.9学习笔记一(创建2D/3D地图) 2D: 代码: </span> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Intro to MapView - Create a 2D maptitle> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/">script> <script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView){ var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene zoom: 4, // Sets zoom level based on level of detail (LOD) center: [15, 65] // Sets center point of view using longitude,latitude }); }); script> head> <body> <div id="

Echarts学习笔记1——echarts柱状图分析

做数据可视化时,Echarts是很好用的。这里来一个学习笔记系列。 官网:http://echarts.baidu.com/ 一、引用echarts Echarts可以用npm进行安装,也可以直接导入到web项目进行引用,博主采用了引用方式直接分析它的使用。 下载Echarts:http://echarts.baidu.com/download.html 导入相关js: body里的内容如下: 结果图: 二、echarts柱状图分析 1,init渲染 首先echarts通过js找到id为main的div,通过init(document.getElementById(‘main’))对该框进行渲染。到这一步是没有任何显示的。 真正起作用的事setOption方法。 让我们来看下init 的api: (dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { devicePixelRatio?: number renderer?: string width?: number|string height? number|string }) => ECharts dom就是指一个dom对象,像document.getElementById(‘main’)); theme的话可以设置主题,比如增加一个theme属性:echarts.init(document.getElementById(‘main’),’dark’),界面变为: 对于theme而言,dark和light一般是有的,其他的主题就得找一找咯 opts和theme一样是可选的,用来显示指定实例相关属性。 2,setOption setOption是这段代码的核心,设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成。ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 调用setOption方法: chart.setOption(option, { notMerge: ..., lazyUpdate: ..., silent: ... }); option:图表的配置项和数据;notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。;lazyUpdate:可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。silent:可选,阻止调用 setOption 时抛出事件,默认为false,即抛出事件。 像代码中的xAxis: {type: ‘category’}, 这些部分,都属于opts的部分,还有dataset也属于option的内容。 配置项API:http://echarts.baidu.com/option.html#xAxis (1)title 以title为例,如果在option选项中加入 : title:{text:[ ‘bars1′,’bars2′,’bars3’ ]}, 则会在页面上显示标题: (2)xAxis 这个属性是用来设置x轴的 重点看一下type这个属性: 'value' 数值轴,适用于连续数据。

收藏网址大全

1.免费接口大全: https://github.com/jokermonn/-Api 2.svg在线编辑器: http://www.zuohaotu.com/svg/ 3.脚本之家在线工具 http://tools.jb51.net/color 4.对你写的正则执行步数查询 https://regex101.com/ 5.mpvue-docs http://mpvue.com/mpvue/ 6.图片处理 https://developer.qiniu.com/dora/manual/1270/the-advanced-treatment-of-images-imagemogr2 7.起名网站 https://unbug.github.io/codelf/#%E4%BD%9C%E8%80%85 8.兼容查询 https://caniuse.com 压缩图片 https://tinypng.com/

Dart语言学习总结

因要学习flutter平台,平台语言使用Dart,看了一下官方的demo: https://github.com/flutter/flutter 看起来有点吃力,还是学习Dart语言也有利于以后开发,学习地址: https://www.dartlang.org/guides/language/language-tour https://www.dartlang.org/guides/libraries/library-tour 总结如下: 1.Dart简介 强类型语言 一个单线程的语言 类型注释是可选的,Dart可以推断类型。 Dart支持泛型类型 程序都必须具有顶级main()功能,该功能用作应用程序的入口点 接口可以有函数 类和接口是统一的,都是接口 2.关键字: abstract 2 dynamic 2 implements 2 show 1 as 2 else import 2 static 2 assert enum in super async 1 export 2 interface 2 switch await 3 external 2 is sync 1 break extends library 2 this case factory 2 mixin 2 throw catch false new true class final null try const finally

css 变量 实现页面换肤

开始之前先说说css3的自定义属性,之前我们在写css的时候全部都是使用自身属性,比如margin,padding等。但是你曾是否见过这样的css :root{ --primary-color:#989898; --light:#fff; --dark:#000; } 其中的–primary-color、–light、–dark就是自定义的属性。 自定义属性的命名规则 --variables-name:variables-value --属性名:属性值 例如定义一个主题颜色: --theme-color:red; 作用域 //:root作用于全局 :root{ --theme-color:red; } //#app作用于id为app的节点内 #app{ --theme-color:red; } 使用方法 var(自定义属性名) 通过JS获取和设置自定义的属性 //js中获取--theme-color的值 var styles = getComputedStyle(document.documentElement); var value = styles.getPropertyValue("--theme-color"); console.log(value);//red //js中更改--theme-color的值 document.documentElement.style.setProperty("--theme-color","black"); 明白了这几个概念我们开始实现我们的换肤功能: CSS3自定义属性实现换肤功能 CSS3自定义属性实现换肤功能Demo red black blue ——————— 本文来自 花开花又谢 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/u010730897/article/details/81116958?utm_source=copy 主要使用到 :root 伪类 和 — css 变量, 浏览器兼容情况要考虑 想要更详细了解的, 可以点这里张鑫旭大神的博文: https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/

面试web前端工程师的两个星期的心路历程及面试题

毕业接近3年半了,年初公司进行了一次业务调整,hr小姐姐明里暗里让我们自动滚蛋,但是我牛脾气上来了你不说可能我自己会走,你这一说我偏不走了,于是乎,生生熬到9月份。。。 9月中旬开始改简历,投递简历。。。小姐姐我并不是大神,简简单单的一个小前端,主要做官网类型的开发,主要使用html,css3,javascript,jquery外加一点儿vue.js,后端语言稍微了解一点儿php,没办法,原来php小哥哥走了,没人做了,我就硬着头皮改着。个人感觉可以了,就挑了几个合适的公司开始投简历,过了两天开始接到面试电话,然后开始了长达一个多星期的面试。 一开始什么准备都没有,直接去面试,基本都被虐的不行,但也是自己略菜,有些基本的js问题都忘了,回来好好复习了一下之后,后面的面试基本没什么问题,但是总能碰到一些我无法描述的问题。下面我把我面试过程中遇到的问题分享给大家: 1、html三栏布局有几种(就是左右固定,中间自适应) 浮动布局float、定位布局、flex布局、表格布局、css3栅栏布局 2、html5有哪些新特性 字体样式、圆角、视频、音频、canvas、svg、sessionstorge、localstorage… 3、css3位移怎么做 transform:translate(x,y) 4、垂直居中有几种方法? 定位,表格下(text-justify),display:flex(又问具体实现的属性叫什么…突然忘了,想了好一会儿,align-item,text-justify) 5、如何提升网站性能?SEO优化? 减少http请求;图片、样式、js压缩再使用;使用cdn;样式、脚本尽量使用外链;减少dom操作;html语义化; 网站头部title,keywords,description正确描述;html语义化; 6、js里面关于数组的操作有哪些? jion;concat;pop;push;splice;slice; 7、js数组操作pop返回值是什么?push操作返回值是什么? pop返回删掉数组最后的那个元素;push增加元素返回长度。。。 8、http协议返回码的含义 4xx:客户端错了;5xx:服务端错了;2xx:成了 9、js深拷贝和浅拷贝的问题 个人浅理解,浅拷贝就是复制这个对象及属性值,并没有重新开一个内存出来,所以原来属性变了复制过来的也跟着一起变;深拷贝,直接复制整个对象,开辟一个新的内存; 10、关于typeof console.log(typeof(a)) //object console.log(typeof(‘a’)) //string console.log(typeof(1)) //number console.log(typeof(null)) //object console.log(typeof(undefined)) //undefined console.log(typeof(false)) //boolean 11、关于null、undefined 12、js变量的提升 13、js作用域 14、js原型与原型链 15、for循环 (。。错了) 16、settimeout 17、js回收垃圾 18、数组去重 19、数组查重 20、单例模式和观察者模式用代码表示出来(我一脸懵逼,这我要怎么用代码描述。。。) 21、两个数组相加(做错了) 22、js继承 构造继承、原型继承 携程面试题,可是我也不知道当时在抽什么风,构造函数居然写不出来,我估计是去搞笑的,生生浪费了这次机会 总结 以上就是我要说的内容,希望以上的内容可以帮助到正在默默艰辛的大家,希望大家在往后的工作与面试中一切顺利。 那如何学习才能快速入门并精通呢? 当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。 但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有一套实用的视频课程用来跟着学习是非常有必要的。 本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:866109386,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频文件资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

小程序在当前页面改变上一页面状态

var pages = getCurrentPages(); //获取当前页面 var prevPage = pages[pages.length - 2]; //获取上以页面 console.log(prevPage) var wishDatialItem = "wishDatial[" + that.data.index + "].is_partake"; //获取上以页面点击的index下面是直接改变 //setData直接改变状态 触发旧的状态改变 console.log(wishDatialItem) prevPage.setData({ [wishDatialItem]: false, })

登录注册样例(附带输入信息检验) springmvc

1 注册界面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> </span> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>买家注册title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="${pageContext.request.contextPath}/conf1/css/font-awesome.min.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/conf1/css/ionicons.min.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/conf1/dist/css/adminlte.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" > head> <script type="text/javascript"> function checkForm(){ if($.trim($("#name").val())==""){ alert("请填写名字"); $("#name").focus(); return false; } if($("#name").val().length>50){ alert("名字长度不得大于50个字符"); $("#name").focus(); return false; } if($.trim($("#username").val())==""){ alert("请填写用户名"); $("#username").focus(); return false; } if($("#username").val().length>50){ alert("用户名长度不得大于50个字符"); $("#username").focus(); return false; } if($.trim($("#password").val())==""){ alert("请填写密码"); $("#password").focus(); return false; } if($("