BOM:浏览器对象模型
DOM:文档对象模型
创建时不区分数据类型，赋值时区分数据类型
var str="123";
console.log(str*1+1);*1自动转换为整型
优先使用Number()
如果是数字，isNaN 返回False
var str="520134199906061234";
console.log(str.substr(1,3));#（起始位置，截取长度）
console.log(str.substring(0,3));#算前不算后 （起始位置，结束位置+1） 记住要加1
字符串截取：上面
console.log(str.charAt(16));直接取位置
console.log(str.indexOf(1));查找字符串中第一次出现1的位置，从编号0开始查找
console.log(str.indexOf(1,4));从编号4开始查找
按照一定规律将字符串转换成数组
var str="aa,ttt,121,gg,kk,aa,bb";
var arr=str.split(",");
console.log(arr);
链接
console.log(str.concat("55","77"));字符串
console.log(arr.concat("55","77"));数组
替换
console.log(str.replace("aa","im"));只替换第一个符合要求的字符串
日期函数
var d1=new Date();
var d2=new Date("2022-1-1 10:57:45");
console.log(d2.getDate());
console.log(d1.getDate());
console.log(d2.getMonth());//月份从0开始算起
console.log(d2.getFullYear());
console.log(d1.getHours());
console.log(d1.getMinutes());
console.log(d1.getSeconds());
var n=d2.getTime()-d1.getTime();//转换成毫秒数计算
console.log(parseInt(n/(24*3600*1000)));
//2020-1-1 12:21 日期格式化
function fun_FmtDate(){
var d1=new Date();
var yyyy,mm,dd,hh,mi,ss;
var time;
yyyy=d1.getFullYear();
mm=d1.getMonth()+1;
dd=d1.getDate();
hh=d1.getHours();
mi=d1.getMinutes();
ss=d1.getSeconds();
time=yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss;
return time;
}
console.log(fun_FmtDate());
var n=16.654789;
console.log(Math.round(n));//只能四舍五入取整
console.log(n.toFixed(2));//保留小数后两位
数组
//声明或创建一个不指定长度的数组，实例化创建
var arrayObj=new Array();
//声明或创建一个数组并指定长度的数组
var arrayObj=new Array(5);
//声明或创建一个带有默认值的数组
var arrayObj=new Array(2,4,"a","y",8);
//创建一个数组并赋值的简写，隐式创建数据
var arrayObj=[2,4,"a","y",8];
//数组赋值、字符下标、数组遍历
console.log(arrayObj[0]);
for(var i in arrayObj){
console.log(arrayObj[i]);
}
JS对表单元素进行设置
页面加载事件
<body onload="show1()">
<form>
<label>用户名</label>
<input type="text" id="userName" name="userName" value="1"/>
<input type="button" name="" onclick="show1()" id="btn" value="button"/>
</form>
</body>
function show1(){
document.getElementById("userName").value="99";
}
单选按钮
<input type="radio" name="xb" value="1" checked="checked"/>男
<input type="radio" name="xb" value="0"/>女<br>
function show1(){
var xb=document.getElementsByName("xb");
var xbText;
if(xb[0].checked){
xbText=xb[0].value;
}else{
xbText=xb[1].value;
}
alert(xbText);
}
列表框（三级联动）
<html>
<head>
<title>你好</title>
<link rel="stylesheet" type="text/css" href="1.css">
<script type="text/javascript" src="js1.js"></script>
</head>
<body onload="ymd()">
<form>
<select name="yyyy" id="yyyy" onchange="selectYmd()">年</select>
<select name="mm" id="mm" onchange="selectYmd()">月</select>
<select name="dd" id="dd">天</select>
<input type="button" name="" value="删除" onclick="deleteSelect()">
</form>
</body>
</html>
function ymd(){
//获取id=yyyy的控件
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var date=new Date();
var year=parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
//获取列表框的长度
var n=yyyy.length;
//默认值设置为中间年份
yyyy.selectedIndex=Math.round(n/2);
}
//给列表框赋值，传递三个参数：表单元素、初始值、结束值
function initSelect(obj,start,end){
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
function selectYmd(){
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var m=parseInt(mm.value);
var dayEnd;
if(m==4||m==6||m==9||m==11){
dayEnd=30;
}else if(m==2){
dayEnd=28;
y=parseInt(yyyy.value);
if((y%4==0&&y%100!=0)||y%400==0){
dayEnd=29;
}
}else{
dayEnd=31;
}
//将某个列表框的条目数设置为零，效果是删除
dd.options.length=0;
initSelect(dd,1,dayEnd);
}
//删除列表框的某一个条目，按索引号删除
function deleteSelect(){
var dd=document.getElementById("dd");
//dd.options.remove(1);
for(i=dd.length;i>=0;i--){
dd.options.remove(0);
}
}
更换头像
<body onload="ymd(),initLogo()">
<form>
<select name="yyyy" id="yyyy" onchange="selectYmd()">年</select>
<select name="mm" id="mm" onchange="selectYmd()">月</select>
<select name="dd" id="dd">天</select>
<input type="button" name="" value="删除" onclick="deleteSelect()"><br>
<img id="logoImg" src="概念图/1.jpg" height=100px width=200px >
<select id="logo" onchange="selectLogo()"></select>
</form>
</body>
function initLogo(){
var logo=document.getElementById("logo");
for(i=1;i<=15;i++){
logo.options.add(new Option(i,i));
}
}
function selectLogo(){
var logo=document.getElementById("logo");
var n=logo.value;
var logoImg=document.getElementById("logoImg");
logoImg.src="概念图/"+n+".jpg";
}
<body>
<form>
<input type="checkbox" name="interest"/><label>游泳</label>
<input type="checkbox" name="interest"/><label>爬山</label>
<input type="checkbox" name="interest"/><label>看书</label>
<input type="checkbox" name="interest"/><label>听哥</label>
<input type="button" name="" id="btn1" value="全选" onclick="checkInterest()">
<input type="button" name="" value="反选" onclick="checkInterest1()">
</form>
</body>
var flag=true;
function checkInterest(){
var interest=document.getElementsByName("interest");
for(i=0;i<interest.length;i++){
interest[i].checked=flag;
}
if(flag){
document.getElementById("btn1").value="全不选";
}else{
document.getElementById("btn1").value="全选";
}
//点击一次全选，再点击全不选
flag=!flag;//开关按钮，开关变量
}
//反选功能
function checkInterest1(){
var interest=document.getElementsByName("interest");
for(i=0;i<interest.length;i++){
interest[i].checked=!interest[i].checked;
}
}
