Web

动画的属性

速度曲线表格: 值 含义 linear 动画从头到尾的速度是相同的。匀速 ease 默认。动画以低速开始,然后加快,在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 steps() 指定了时间函数中的间隔数量(步长) 延迟时间: 就是指这个动画需要延迟多久再去播放 animation: big 10s 10s; 重...

动画的使用

过度只能是两个状态之间的转换 动画可以实现多个状态的变化过程 定义动画写发( 一 ): <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> <style> .box{ width: 100px; height: 30px; bac...

transform-origin元素

transform-origin是用来修改旋转角度的 transform-origin:(水平 垂直); 例如: transform-origin:(left top); 就是说左上角旋转 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equi...

transform元素

过度:transition: all 0.5s; 如果使用多重转换如:             transform: translate(600px) rotate(900deg); 一定是要线平移在旋转 如果是先旋转的话就还会改变xy轴的轨迹 值 描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 matrix3d(n,n,n,n,n,...

vertical-align元素

vertical-align:baseline(元素的基线与父元素的基线对齐) vertical-align:sub(降低元素的基线到父元素合适的下标位置) vertical-align:super(升高元素的基线到父元素合适的上标位置) vertical-align:bottom(把对齐的子元素的底端与行框底端对齐) vertical-align:text-bottom(把元素的底端与父元素内容...

nth-child的属性和用法

在nth-child(n)中这里的n可以是关键词,even表示选取的是偶数,odd表示选取的是奇数 如:odd选的是奇数 li:nth-child(odd){ background-color: #7FFFD4; } 如:even选的是偶数 li:nth-child(odd){ background-color: #7FFFD4; } 如: 5n就是5个选一次进行操作 li:nth-child(5...

文本修饰

/* text-decoration: underline; 下划线 */ /* text-decoration: line-through; 删除线 */ /* text-decoration: overline; 上划线 */ /* text-decoration: none; 无任何装饰 * 内减模式 如果一个div盒子100*100 加上一个10px的边框 会加大边长使用box-sizin...

语义化标签

< h1>~< h6>标签:标题标签,h1等级最高,h6等级最低 header元素:用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框 nav元素:定义页面的导航链接部分区域 main元素:定义页面的主要内容,一个页面只能使用一次。 article元素:定义页面独立的内容,它可以有自己的header、footer、sections等 section...

表单

<!–占位符 placeholder–> <input type=”text” name = “a12″ placeholder=”用户名”/> <input type=”reset” name=”a12″ /> <!–单选框–> <div> <!–有相同name的单选框为一组–> <!– checked=...

audio:音频标签

<!–音频–> <!–显示播放控件–> <audio src=”./G.E.M.邓紫棋 – 红蔷薇白玫瑰.mp3″ controls></audio> <!–自动播放(部分浏览器不支持)–> <audio src=”./G.E.M.邓紫棋 – 红蔷薇白玫瑰.mp3″ autoplay></audio> ...

正则表达式

<script> //获取用户名对象 var user = document.getElementById(“user_name”); //绑定事件,失去焦点事件 user.onblur = d3; function d3(){ //获取输入usernane值 var value = user.value; //弹出获取到的值 // alert(value); var aim = /^...

事件监听

<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> <style> #d{ width: 100px; height: 30px; background-color:slateblue; border:0; /* border-r...

document元素对象

<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> </head> <body> <img src=”images/D1.png” id = “d1″ height=”300px” width=”300px”/&...

Js实现图片切换

<img id = “dim” src=”images/D2.png” width=”100%” height=”100%” sizes=”any”/> <script> function on(){ document.getElementById(“dim”).src=’images/D1.png’; } function off(){ document.getEleme...

自已定对象,window对象

<script> //自定义对象 var dim = { name:”码云”, age:20, di:function(){ alert(1); } } //调用di方法 dim.di();   <script> // var a = confirm(“确认删除吗”); // if(a == false){ // document.write(“没删除”); // }els...

Array对象

数组属性 属性 描述 constructor 返回创建数组对象的原型函数。 length 设置或返回数组元素的个数。 prototype 允许你向数组对象添加属性或方法。 Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果。 copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。 entries() 返回数组的可迭代对象。 every() 检...

Js定义函数

这些和java的用法一样 <script> //方法定义一 function dim1(a,b){ return a + b; } var di = dim1(1,2); alert(di); //方法定义二 var dim = function (vc,c){ return c + vc; } /* * 在传参的时候可以传任意多个值( var d = dim(1,2,3,4,54,5...

运算符

/* *类型转换 * * 其他类型转换成number: * String: String转化成number会按照String的字面值转换,如果不是数字的话会转换成NaN,使用parseInt进行转换 * */ var a = “1”; alert(parseInt(a) + 10); /* *其他类型转换成Boolean * * number: 0转换成false其他转换成ture * Strin...

变量&数据类型

变量: var创建的变量作用域很大,定义变量就相当于是全局变量 数据类型: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Demo01</title> </head> <body> <script> //number ...