学习笔记10

2017年10月11日

学习笔记与总结

1.CSS3 animation 动画标签

使用动画必要的两个属性：1：动画名称 2：动画持续时间

1.动画名称

animation-name:change;

2.动画持续时间

animation-duration:3s;

3.动画播放的速度函数

animation-timing-function:linear;

4.动画播放次数 取值具体次数或者 infinite 无限循环播放

animation-iteration-count:infinite;

5.动画是否下一周期逆向地播放 默认值是normal 从头播放

animation-direction:alternate;

6.动画执行完毕的状态

1：forwards：动画保持最后的显示效果

2：backwards：动画回到最初的显示效果

animation-fill-mode:forwards;

7.动画的延迟时间 默认为0s

animation-delay:1s;

@keyframes change{

10%{

background-color:#ff7300;

}

50%{

background-color:#cccccc;

}

100%{

background-color:slateblue;

}

}

2.JS入门

什么是JS

1：基于浏览器

2：基于对象 借鉴了java的很多优秀的语法特点

3：事件驱动

4：脚本语言

JS可以用来做什么？

1：前端数据验证。减轻服务端的压力

2：配合实现更加丰富的动画效果

3：操作页面内容和浏览器

4：网络请求，实现动态（数据）页面

JS由几个部分组成

1：ECMAscript 规定了JS的语法规范

2：DOM document object model 文档对象模型 整个html页面

3：BOM browser object model 浏览器对象模型 页面的运行环境

学习JS过程中，可以和CSS进行类比

JS的使用方法

1：行内js 把js代码卸载标签内部 优缺点和行内css一样

<buttononclick="javascript:alert('您点击了欢迎按钮')">欢迎!</button>

2：内部js

3：外部js

<scriptsrc="../../../js/first.js"></script>

script标签里的src属性可以指定你要引入的js文件

注意！！！

在引入外部js文件的script里，不允许出现任何的js代码

noscript标签：当浏览器不支持js或者浏览器的js功能没有开启，会显示标签之间的内容

<noscript>您的浏览器不支持js</noscript>

JS数据类型

var num1;//undefined

var num2= 10;//number

var num3= num1+ num2;//NaN

alert(isNaN(num2));//NaN不是一个数字 isNaN：判断是否是数字类型

/*number：整形和浮点型*/

var i= 5;

var i2= 3.5;

/*boolean*/

var b= true;

/*==：只对数据进行比较，不区分类型*/

/*===：严格相等！ 既比较数据，还比较类型。类型不一致，不等*/

var num= 35;

var str= "35";

alert(num=== str);

JS数据转换

var str= "100";

var num= 100;

/*Number()：将任意类型的数据转换成Number类型*/

var str2= Number(str);

alert(typeofstr2);

/*typeof：用来判断一个数据的类型*/

alert(str2+ num);

/*把布尔类型的数据转换成Number类型 true--1 false---0*/

var b= true;

var b2= Number(b);

alert(b2);

/*把null转化成Number类型 null---0*/

var s= null;

var s2= Number(s);

alert(s2);

/*把undefined用Number()函数转换 结果是NaN*/

var n= undefined;

var n2= Number(b);

alert(b);

JS数据转换2

var s1= "100.5";

var result1= parseInt(s1);

alert(result1);

var result2= parseFloat(s1);

alert(result2);

var s2= 100;

var result3= parseInt(s2);

alert(result3);

var result4= parseInt(s2);

alert(result4);

/*字符串转换成数字的时候，字符串可以使用纯数字

也可以是数字和字符串的拼接 但是如果是字符串和数字的拼接

1：数字开头：只会取开始数字的连续部分，见到字符就截止

2：字符开头：不会得到数字！！*/

var s3= "100hhy";

var result5= parseInt(s3);

alert(result5);

typeof 显示数据类型

输入输出 prompt();

var num1= parseInt(prompt("第一个数："));

var num2= parseInt(prompt("第二个数："));

alert(num1+ num2);