码迷,mamicode.com
首页 > 其他好文 > 详细

week 4

时间:2017-04-04 22:53:53      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:imu   引号   支持   地址   情况   状态栏   初始化   二次   use   

                                                       移动开发基本概念

<!--[了解 像素基础知识]
① 设备物理像素:设备上一个像素点
② 设备无关像素:可以与物理像素通过dpr转换。(当dpr为1时,设备无关像素=设备物理像素)
③ CSS像素:CSS中使用的抽象概念。当页面没有缩放时,CSS像素=设备无关像素。

设备像素比dpr = 物理像素/设备无关像素
-->

<!--[重点 viewport]
设置布局viewport的各种信息:
width=device-width:布局viewport宽度等于设备宽度
initial-scale=1.0:默认缩放比为1(目的:让CSS像素=设备无关像素)
maximum-scale=1:最大缩放比为1
minimum-scale=1:最小缩放比为1
user-scalable=no:用户禁止缩放(iOS10中的sarifi浏览器失效)
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>

<!--
禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件
-->
<meta name="format-detection"content="telephone=no,email=no"/>

<!--
iOS 添加到主屏幕时,WebAPP的标题
-->
<meta name="apple-mobile-web-app-title" content="我的第一个WebAPP">

<!--
iOS 添加到主屏幕时,WebAPP的icon图标
-->
<link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />

<!--
iOS 添加到主屏幕时,启用WebAPP全屏模式,删除顶端地址栏和底部工具栏
-->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!--
iOS 添加到主屏幕时,WebAPP顶部状态的样式
可选值:
black:黑色
default:默认白色
black-translucent(半透明):网页内容充满整个屏幕,顶部状态栏会遮挡网页头部。
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!--
设置浏览器,时候最新的IE和chrome去编译
>>> 不是手机端专用,PC网页一般也需要设置
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- 其他几个meta标签,了解即可
① 设置浏览器过期时间,-1表示时刻过期,及每次刷新都要请求最新数据
② 是否设置浏览器缓存,否
③ 是否从本机读取缓存文件,否
-->
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">


<style type="text/css">

*{
margin: 0px;
padding: 0px;
/* 【手机端样式选择】
* 1、一般手机均不支持微软雅黑,中文字体无需设置,使用手机默认即可;
* 2、英文字体,一般选择font-family:Helvetica;
*/
font-family:"宋体",Helvetica,sans-serif;

/* 禁止选中文本(如无文本选中需求,此为必选项)
* 1、手机端禁止长按选中;
* 2、电脑端禁止鼠标选择;
*/
-webkit-user-select: none;
-moz-user-select: none;

/* 去除表单默认外观
* 手机、电脑均可使用;
*/
-webkit-appearance:none;
-moz-appearance: none;
appearance: none;
}
/* 禁止长按链接与图片弹出菜单 */
a, img {
-webkit-touch-callout: none;
}


/* 修改input的placeholder默认样式
* 修改input获得焦点时placeholder样式
*/
/*谷歌*/
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}
/*火狐19+*/
input::-moz-placeholder{color:red;}
input:focus::-moz-placeholder{color:green;}
/*IE 10+*/
input::-ms-input-placeholder{color:red;}
input:focus::-ms-input-placeholder{color:green;}

 

                                               js变量输入与输出

<!--[使用js的三种方式]
1,html标签中内嵌js(不提倡使用):
<button onclick="javascript:alert(‘hhhhhhh‘)">有本事点我呀</button>

2,html页面中直接使用js:
<script type="text/javascript">
//js代码
</script>

3,引用外部js文件:
<script language="javasvript" src="js文件路径"></script>

【注意事项】
①页面中js代码与引用js代码,可以嵌入到html页面的任何位置。但是,位置不同会影响到js代码的执行顺序;
例如:<script>在body前面,会在页面加载之前执行js代码;

②页面中js代码,使用type="text/javascript"
引用外部的js文件,使用language="javascript"

③ 引用外部js文件的<script></script>标签,必须成对出现,且标签内部不能有任何代码!
-->
<script type="text/javascript">
//alert(“我谈了一个窗");
//js中的注释
//单行注释。ctrl+/
/*段落注释 ctrl+shift+/
*/
//document.write("<h1>hahaha</h1>");



/*【js中的变量】
* 1,js中变量声明的写法:
* var width =10; //使用var声明的变量,只在当前函数作用域有效
* width1=11; //不适用var,直接赋予生成的变量,默认为全局变量,整个js文件有效
* var a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔。但赋值需要单独赋,例如上式中只有c赋为1,
* a/b为undefined(未定义)
* 【声明变量注意事项】
* ①js中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行
*
* ②同一变量,可以在多次不同赋值时,修改变量的数据类型:
* var width =10;//width 为整形变量
* width=“哈哈”://width 被改为字符串类型
*
* ③变量可以使用var声明,也可以省略var。【区别】不使用var,默认为全局变量
*
* ④同一变量名 可以多次用var声明。但是并没有任何含义,也不会报错。第二次之后的声明,只会被理解为赋值;
*
*
* 2,变量的命名规范:
* ①变量名,只能有字母,数字,下划线,$组成
* ②开头不能是数字
* ③变量区分大小写,大写字母与小写字母为不同变量
*
* 3,变量名命名要符合驼峰法则:
* 变量开头为小写,之后每个单词首字母大写(或单词之间用下划线分隔)
*
* 4,js中的变量的数据类型
* undefined:未定义,用var声明的变量,没有进行初始化赋值
* null:表示为空的引用。
* boolean:真假,可选值 true/false
* number:数值类型。可以是小数,也可以是整数。
* string:字符串类型,用双引号或单引号包裹的内容称为字符串。
* object:(复杂数据类型):后续讲解,函数,数组等。。。
*
* 5,常用的数值函数:
* ①isNaN:用于判断一个变量或常量是否为NaN(非数值)
* 使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,结果为false。
* ”111“ 纯数字字符串 ”“空字符串,false ”1a“包含其他字符,true
* true/false 布尔类型,false
*
* ②Number():将其他类型转换为数值类型
* 【字符串类型转数值】
* >>>字符串为纯数值字符串,会转为对应的数字 ”111“->111
* >>>字符串为空字符串时,会转为0 ”“->0
* >>>字符串包含其他非数字字符时,不能转换 ”111a“->NaN*
* 【布尔boolean类型转数值】
* true ->1 false -> 0
* 【null/undefined转数值】
* null -> 0 Undefined ->NaN
* 【object类型转数值】
* *(以后再了解)先调用ValueOf函数,确定函数是否有返回值,再根据上述各种情况判断。
*
* ③parseInt:将字符串转为数值类型
* >>>空字符串,不能转。结果为NaN
* >>>纯数值字符串,能转。”123“ -> ”123“ ”123.5“ -> 123(小数转换时,直接抹掉小数点,不进行四舍五入)
* >>>包含其他字符的字符串。会截取第一个非数值字符前的数值部分。
* ”123a456“ -> 123 ”a123b456“ -> NaN
* >>>parseInt只能转String,Boolean/null/Undefined 均为NaN
*
* ④parseFloat:将字符串转为数值
* >>>使用方式同parseInt。但是,当转化小数字符串时,保留小数点,转化整数字符串时,保留整数;
* ”123.5“ -> 123.5 ”123“ -> 123
*
* ⑤typeof:用来检测变量数据类型
* 未定义 -> Undefined 字符串 ->String true/false -> boolean
* 数值 ->Number 对象/null -> Object 函数 -> function
*/

var a;//声明变量
a=10;//给变量赋值

var width =10;
width=11;

width="哈哈";
alert(width);
</script>

<script type="text/javascript">
</script>

<script language="JavaScript" src="">
</script>

<script type="text/javascript">
/*【js中的输入与输出语句】
* 1,文档中打印输出:document.50write();
* 输出语句,将write的()中的内容打印在浏览器屏幕上;
*
* 使用时注意,除变量/常量以外的任何内容,打印时必须放到“”中。变量/常量必须放到“”外。
*
* 打印的内容同时有多部分组成是,之间用+链接:
* 例如:document.write(“左手中的纸牌:”+left+“<br/>");
*
*2,弹窗输出: alert();
* 弹窗警告,()中的使用方式同上
* 3,弹窗输入:prompt(“请输入您的名字:”,“江浩”);
* 两部分参数:①输入框上面的提示信息
* ②输入框里面的默认信息
* 两部分之间用逗号分隔,只写一部分时,默认为提示信息;
*
* 可以定义变量接收输入内容,例如var name = prompt("请输入您的名字:“);点击确定按钮,输入成功;
* 点击取消按钮,name=null;
*/

                                             js中的运算符

1, 算术运算
+ 加、- 减、* 乘、 / 除、 % 区域、++ 自增、-- 自减

+:有两种作用,链接字符串/加法运算;当+两边均为数字时,进行加法运算;当+两边有任意一边为字符串时,
进行字符串链接,链接之后的结果认为字符串

++:自增运算符。将变量,在原有基础上+1;
--:自减运算符,将变量,在原有基础上+1;

2, 赋值运算
= += -= *= /= %=
+=:a+=5;相当于 a=a+5;但是前者 的执行效率要比后者快。

3,关系运算
== 、 != 不等于、>、<、>=、<=

===:严格等于;类型不同,返回false;类型相同,再进行下一步判断;
==: 等于;类型相同,同===;类型不同,尝试将等式两边转为数字,再判断。
特例: ! null==undefined √ null===undefined × !
4,条件运算符(多目运算)
a>b?true:false

有两个关键符号:?和:
当?前面的部分运算结果为true时,执行:前面的代码;
当?前面的部分运算结果为false时,执行:后面的代码

》》多目运算符可以多层嵌套:
例如:var jieguo= num>5?"输入太大":(num==5?"蒙对了!":“输入太小”);/
5,逻辑运算符
&& 与 ||或 !非
*/

[运算符的优先级]
()
! ++ --
% / *
+ -
> < >= <=
== !=
&&
||
各种赋值= += *= /= %=

document.write(1==123);

/*【n++ 与 ++n 的异同】
* n++:先使用n的值进行计算,然后再把n+1;
* ++n:先把n的值加1,然后再用n+1以后的值运算;
*
* 相同点:不论n++还是++n,在执行完代码以后,均会把n+1;
*/

                                        if-else结构语句

/*1,【if-else结构】
* if(判断条件){
* //条件为true时执行
* }else{
* //条件为false时执行
* }
*
* 2,if()中的表达式,运算之后的结果应该为:
* ①boolean: true 真 false 假
* ②string:非空字符串为真 空字符串为假
* ③number:0为假 一切非0均为真
* ③null/nan/undefined:全为假
* ④object类型全为真
*
* 3,else{}结构,可以根据具体情况省略
*
*
*
*
* 【多重if,阶梯if】
* 1,结构写法:
* if(条件1){
* //条件已成立
* }else if(条件2){
* //条件一不成立&&条件二成立
*
* //else-if 部分,可以有n多个
* }else{
* //条件一不成立&&条件二不成立
* }
*
* 2,多重if结构中,各个判断条件是互斥的!只能选择其中一条路。
* 3,if/else的{}可以省略,但是一般不提倡;
* 如果省略{} 则,if/else结构包含的代码,仅为其后最近的一行(分号结束);
* 如果省略{} 则,else结构永远输入其前方最近的一个if结构
*/

[switch-case结构]
1,结构写法:
switch(表达式){
case 常量表达式1: ←←是冒号!!!!!!!
语句1;
break;
case 常量表达式2:
语句2;
break;
......
default:
语句n;
break;
}

2,注意事项:
①switch()中的表达式,以及每个case后面的表达式,可以为任何js支持的数据类型(对象和数组不行);
②case后面的所有常量表达式,必须各不相同,否则只会执行第一;
③case后的常量可以是任何数据类型,同一个switch结构的不同case,可以是多种不同的数据类型;
④switch在进行判断的时候,采用的是全等判断===.
⑤break的作用:执行完case代码后,跳出当前switch结构;
缺少break的后果:从正确的case项开始,依次执行所有的case和default 原因↓⑥
⑥switch结构在判断时,当遇到正确的case项后,将不再判断后续项目,依次往下执行.
⑦基于⑥,switch结构的执行速率要快于多重if结构.在多路分支时,可优先考虑使用switch结构.

 

                                                 循环结构(斐波那契数列举例)

/*【循环结构的步骤】
* ①声明循环变量
* ②判断循环条件
* ③执行循环体(whilede {}中的所有代码)操作
* ④更新循环变量
* 然后,循环执行②③④
*
*
* 【js中循环条件支持的数据类型】
* ①boolean: true 真 false 假
* ②string:非空字符串为真 空字符串为假
* ③number:0为假 一切非0均为真
* ③null/nan/undefined:全为假
* ④object类型全为真
*/

// var n=1; //①声明循环变量
// while (n<=10){ // ②判断循环条件
// document.write("hello world"); //③执行循环体(whilede {}中的所有代码)操作
// n++; //④更新循环变量
// }


[for循环]
1,for循环有三个表达式,分别为:①定义循环变量②判断循环条件③更新循环变量
三个表达式之间,用;分隔.
for循环三个表达式均可以省略,两个;缺一不可
2,for循环特点:先判断再执行.

3,for循环三个表达式均可以由多部分组成,之间用逗号分隔. 但是.第二部分判断条件需要用&&链接,最终结果需要为真/假.prototype


[while循环特点]:先判断,再执行;
[do-while循环特点]:先执行再判断;即便初始条件不成立,do-while循环也至少执行一次;


var m=1;
do{

}while;

//
// var a=1;
// var b=0;
// var sum=0;
// while(a<=1000){
// if (a%7==0) {
//// document.write(a);
// b++;
// } else{sum+=a; }
// a++;
//
// }
// var c=1000-b;
// document.write(c);
// document.write(sum);
//
//

 

 

//// 斐波那契数列


答案:
var a=1;
var b=1;
var c;
document.write("1<br/>");
document.write("1<br/>");
var n=1;
while (n<=18){
c=a+b;
document.write(c+"<br/>");
a=b;
b=c;
n++;
}

                                      

week 4

标签:imu   引号   支持   地址   情况   状态栏   初始化   二次   use   

原文地址:http://www.cnblogs.com/lxd564965917/p/6666751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!