2017年10月11日
学习笔记与总结
1.CSS3 animation 动画标签
使用动画必要的两个属性:1:动画名称 2:动画持续时间
1.动画名称
animation-name
:
change
;
2.动画持续时间
animation-duration
:
3
s
;
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
:
1
s
;
@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一样
<
button
οnclick=
"
javascript
:
alert
(
'
您点击了欢迎按钮
'
)
"
>
欢迎
!
</
button
>
2:内部js
3:外部js
<
script
src=
"../../../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
(typeof
str2
);
/*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
);