1.<script>代码放这里</script>
2.新建.js文件放代码
<script src=".js"></script>
3.document.write("语句") 动态写入内容
4.弹出框
alert("提示信息") 警示框
prompt("提示信息","文本框默认值")
带输入的弹出框,返回用户输入值或null
confirm("提示语句")
返回true或者false
5.js是弱类型语言,不需要进行类型声明
var x;定义变量,可以存任何类型数据
parseInt
运算符
1. + 加法 字符串连接符
数字+数字 加法
数字+字符串 连接符
字符串+字符串 连接符
2.%求余数,正负号同被余数,用来判断整除和奇偶
5%2 1
5%-2 1
-5%-2 -1
x%y==0 x能否被y整除
x%2==0
3.parseFloat(x) 将字符串转化成数值
parseInt(x)
如果转化失败则返回NaN
isNaN(x) 判断是否是NaN
4. prompt(,) 用户点确定返回输入的字符串
用户点取消返回null
5.三目运算符:
变量 = 布尔表达式? 语句1:语句2;
例如: y = x >0 ? x : -x;
举例:如果购买金额大于1000,将给与95折的折扣
y=x>1000?0.95*x:x;
6.if和switch转换
if(表达式==值1) switch(表达式)
执行语句1; {
else if(表达式==值2) case 值1:执行语句1;
执行语句2; case 值2:执行语句2;
..... .......
7.循环
<table>
<tr>
<td></td>
</tr>
</table>
Math
Math.random() 0~1随机数
Math.round(x) 四舍五入
函数的定义和调用
1.定义
function 函数名(参数1,参数2)
{
函数体;
return 返回值;//可以没有,返回值最多只能一个
}
alert("提示信息"); 有一个参数,无返回值
var x = prompt("","0") 有两个参数,有返回值
var x=Math.round(Math.random())
函数的调用
函数名(); 无参数,无返回值
函数名(参数1,参数2); 有参数,无返回值
var x=函数名(参数1,参数2); 有参数,有返回值
事件
onclick
<input type="button" value="" οnclick=""/>
绑定事件的步骤:
1.给标签起id="abc"
2.通过id找到标签并存放在变量里
var x = document.getElementById("abc");
3.绑定事件
x.onclick = function (){
事件发生执行代码
};
页面加载完成事件
window.onload = function (){};
onclick 鼠标点击事件
onfocus 获得焦点
onblur 失去焦点
onm ousedown 鼠标按键按下
onm ouseup 鼠标按键松开
onm ouseover 鼠标移到标签上方
onm ouseout 鼠标移开
onchange 内容发生改变
对象
this 代表当前的对象实例
内部对象
String 字符串对象
定义字符串
var s = "字符串的内容";//最常用
var s = new String(内容)//把括号里的内容转换成字符串类型并保存
属性:length字符串长度,字符串里面字符的个数
字符串变量名.length
var s = "hello";
var x = s.length;//5
遍历字符串
for(i=0;i<s.length;i++)
{
x = s.charAt(i);//返回给定位置的字符
alert(x);
}
方法:
s.charAt(i);返回给定位置的字符,从0开始编号
s.indexOf("检索的字符串",起始检索位置)
返回检索字符串首次出现的位置或-1(未检索到)
s.substring(起始,结束)
返回从起始位置开始,长度为 结束-起始 的子串
var s = "hello world";
var x = s.substring(1,4);
alert(x);//ell
大小写转换
s.toLowerCase() 返回转换后的小写字母字符串,原字符串不变
s.toUpperCase()
var s = "heLLO*& \nworld";
var x = s.toLowerCase();
alert(x);
Math
属性: Math.PI 圆周率
计算圆面积
判断长度
判断值大小
方法:
Math.random() 返回0~1随机数
Math.round(x) 四舍五入成最接近的整数
Math.round(5.5) 6
Math.round(-5.5) -5
Math.ceil(x) 上舍入成整数
Math.ceil(4.2) 5
Math.ceil(4.7) 5
Math.ceil(-4.2) -4
Math.ceil(-4.7) -4
Math.floor(x) 下舍入成整数
Math.floor(4.2) 4
Math.floor(4.7) 4
Math.floor(-4.2) -5
Math.floor(-4.7) -5
Date 日期
获取当前的时间日期信息
var time = new Date();//获取当前时间日期信息
var y = time.getFullYear();//提取年份
var m = time.getMonth()+1;//提取月份0~11
var d = time.getDate();//提取天
var w = time.getDay();//提取星期0~6,0代表星期天
var h = time.getHours();//小时
var mi = time.getMinutes();//分钟
var s = time.getSeconds();//秒
作业:
在网页上显示以下信息:
你好!今天是:
2019年4月9日,星期2(二)
现在是9:33:7
定时器(计时器)
1秒=1000毫秒
间隔型 setInterval(执行的代码,毫秒)每隔指定时间执行代码,反复执行
延时型 setTimeout(执行的代码,毫秒)延迟指定时间执行,只执行一次
setInterval(function (){},1000);
innerHTML 开始标签和结束标签之间的内容,可读写
关闭定时器
var timer = setInterval(function (){},1000);
clearInterval(timer);
var timer = setTimeout(function (){},1000);
clearTimeout(timer);
通过标签名找标签,返回数组
var x = document.getElementsByTagName("标签名");
x[0]~ x[x.length-1] 使用具体标签时
通过类名字找标签,返回数组
先给标签添加class="名称"
var x = document.getElementsByClassName("类名称");
x[0]~ x[x.length-1] 使用具体标签时
数组
var x = new Array();
var x = ["123",12,12.5];
长度是动态可变的
length
动态创建标记
1.创建标签
var x = document.createElement("标签名");//返回创建的标签对象
x.属性 = 值;//给属性赋值
2.追加子节点
父节点.appendChild(子节点);//作为父节点的最后一个子节点
3.在已有的节点前插入新节点
父节点.insertBefore(新节点,老节点);
老节点.parentNode.insertBefore(新节点,老节点);
4.删除节点
节点.parentNode.removeChild(节点);
5.创建文本节点
var x = document.createTextNode("文本内容");
parentNode 父亲节点
firstChild 第一个子节点
动画
1.var timer = setInterval(function (){},毫秒);
clearInterval(timer);
2.属性
position:absolute; 绝对定位
top left
width height
标签对象.style.top = 20px;