2020年07月_Endless Daydream233

原创前端基础学习之二进制、八进制、十进制、十六进制简单表示

二进制遇2进1 *00000001------1 *00000010------2 *00000011------3 *00000100------4 *00000101------5 *00000110------6 *00000111------7 *00001000------8 *00001001------9 *00001010------10 *00001011------11 *00001100------12 *00001101------13 *0000111

2020-07-30 09:43:15 407

原创前端基础学习之js-交换两个变量的值的三种方法

方法1.使用临时变量temp//使用临时变量let num1=10;let num2=20;let temp=num1;num1=num2;num2=temp;console.log("num1:"+num1,"num2:"+num2);//num1:20 num2:10方法2.使用加减法则// 加减法let num1=10;let num2=20;num1=num1+num2;num2=num1-num2;num1=num1-num2;console.log("num1:"

2020-07-29 14:47:42 593

原创前端基础学习之css3-animation(动画)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。animation:动画名称花费时间运动曲线何时开始播放次数是否反方向;属性描述@keyframes规定动画（类似函数的声明）【0-100% / from（与 0% 相同）to（与 100% 相同）】animation所有动画属性的简写属性，除了 animation-play-state 属性。animation-name规定 @ke

2020-07-27 16:48:52 290

原创前端基础学习之CSS3-过渡（transition）

过渡动画：从一个状态渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡transition: 要过渡的属性花费时间运动曲线何时开始;如果有多组属性变化，还是用逗号隔开：transition:width .4s ease 0s, height .4s;；如果所有属性都是同样的变化，那么只需要用al..

2020-07-23 17:19:21 746

原创 echarts 折线-折线条改为平滑曲线

series 里面有个smooth 属性。如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。 { name: '换率', type: 'line', areaStyle: {

2020-07-22 15:34:43 2526

原创前端学习基础之css3盒子模型(box-sizing:border-box)

之前给div一个300的宽高，最后盒子的宽度=width+padding+border;高度同理。而如果不想盒子宽高被padding和border影响，可以使用：box-sizing:content-box;效果如下图:此时盒子的宽高就是所设置的width和height. padding和border包含其中。...

2020-07-20 18:04:20 457

原创前端基础学习之css3 新增选择器(:nth-child(n)/:[attribute^=value]/::before...)

一、结构(位置)伪类选择器:first-child 选取属于其父元素的首个子元素的指定选择器:last-child 选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型 n可以是数字、关键词、公式nth-last-child(n) 选择其父元素的第n个子元素，从最后一个子元素开始计数<!DOCTYPE html><html lang="en"><head> <meta cha

2020-07-20 16:46:15 420

原创前端基础学习之h5新增标签、属性

新增结构标签headernavarticlesectionasidefooterhgroupfigure新增媒体标签audio 音频video 视频新增表单属性邮箱<input type="email">手机号<input type="tel">网址<input type="url">只能输入数字，会有上下两个按钮<input type="number">拖动滑块可以左右滑动&l

2020-07-20 15:14:39 192

原创前端-js-常用正则表达式

1.仅字数限制//例：必输且小于20位/^.{1,20}$///区分中英文字符长度的话，可以先将双字节的长度转为单字节,再校验长度转换如下：str.replace(/[^\x00-\xff]/g, "00");2.数字、大小写英文字母 20位/^[a-zA-Z0-9]{1,20}$/3.数字、大写英文字母 18位/^[A-Z0-9]{1,18}$/4.手机号码/^1[3456789]\d{9}$/5.邮箱/^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a

2020-07-16 17:45:26 246

原创 css-盒子内包含img标签后，底部留白/盒子高度多了几像素的问题

今天在学习写京东案例的时候，在给一个盒子添加img之后，发现盒子高度高了几像素。例如简单的一个div内包含一个img标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ border: 1px solid red; float: left; } &lt

2020-07-09 16:22:08 682

原创前端学习之字体图标(iconfont)

Web字体字体格式不同的浏览器支持的字体格式是不一样的。tureTypeFont(.ttf)格式. ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+OpenTypeFont(.otf)格式.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0

2020-07-02 14:25:51 4262

原创前端学习之经典案例-云道商城首页

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css"></head><body>  <div class="header.

2020-07-01 15:31:41 1859

no pains,no gains