学习笔记10

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 );
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值