前端基础-03-javascript

最新推荐文章于 2022-08-18 14:25:46 发布
最新推荐文章于 2022-08-18 14:25:46 发布
阅读量278 收藏
点赞数
分类专栏： python全栈开发学习笔记 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37978800/article/details/124935280
版权

JavaScript

第一个javascript程序

内部

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript">
	alert("hello javascript")
</script>
</head>
<body>

</body>
</html>

外部调用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>/*引用js*/
</head>
<body>

</body>
</html>

alert("hello javascript")

在这里插入图片描述
在这里插入图片描述

var x;
x =123;
alert(x+1);

![在这里插入图片描述](https://img-blog.csdnimg.cn/3aff991ba63e433dbd63699cda76cc69.png

var x;
x ="123";
alert(x+1);

在这里插入图片描述
在这里插入图片描述

var x;
x ="123";
console.log(x+1);

在这里插入图片描述

自定义函数

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>

</body>
</html>

function add(){
	alert("999")
}/*创建函数*/
add()/*使用函数*/

在这里插入图片描述

function add(n1,n2){
	alert(n1+n2);
}/*创建函数 n1,n2是形参*/
add(3,4);/*使用函数 3，4是实参*/

在这里插入图片描述

function add(n1,n2){
	var n3;
	alert(n1+n2);
	return n3;
}/*创建函数 n1,n2是形参*/
var num=add(5,5);
alert(num);

在这里插入图片描述

var num1 = function(n1,n2){
	var n3=n1+n2;
	return n3;
}
var n=num1(10,20);
alert(n);

在这里插入图片描述

数据类型及类型转换

  • 定义的时候不区分数据类型，只有在使用的时候区分
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>

</body>
</html>

var str="123" ;/*字符*/
console.log(str+1); /*为转换前加1*/
console.log(parseInt(str)+1); /*转换后加1*/

在这里插入图片描述

var str="123"; /*字符*/
console.log(str*1+1); /*乘后自动转换*/
console.log(parseInt(str)+1); /*转换后加1*/

在这里插入图片描述

var str="abc" ;/*字符*/
console.log(parseInt(str)) ;

在这里插入图片描述

var str="abc" ;/*字符*/
console.log(isNaN(str)) ;

在这里插入图片描述

var str="123" ;
console.log(isNaN(str));

在这里插入图片描述

var str="123";
if(isNaN(str)==false){
	console.log(parseInt(str));
}else{
	console.log("不能转换成数字");
	str=0;
}
console.log(str);

在这里插入图片描述

var str="abc";
if(isNaN(str)==false){
	console.log(parseInt(str));
}else{
	console.log("不能转换成数字");
	str=0;
}
console.log(str);
//如果是数字，isNaN 返回false
//如果不是数字，isNaN 返回true

在这里插入图片描述

其他类型转换

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>

</body>
</html>

var str="100abc";

console.log(parseInt(str));/*忽略结尾字母进行转换*/
console.log(parseFloat(str));/*忽略结尾字母进行转换*/
console.log(new Number(str));

在这里插入图片描述

var str="110.110";

console.log(parseInt(str));
console.log(parseFloat(str));
console.log(new Number(str));

在这里插入图片描述

var str="abc100";/*字母开头无法转换*/

console.log(parseInt(str));
console.log(parseFloat(str));
console.log(new Number(str));/*优先使用该转换*/

在这里插入图片描述

var str=null;

console.log(parseInt(str));
console.log(parseFloat(str));
console.log(new Number(str));

在这里插入图片描述

var str="";
console.log(Boolean(str));

在这里插入图片描述

var str=null;
console.log(Boolean(str));

在这里插入图片描述

var str="  ";
console.log(Boolean(str));


var str="abc";
console.log(Boolean(str));


var str=123;
console.log(Boolean(str));

在这里插入图片描述

var str=0;
console.log(Boolean(str));

在这里插入图片描述

作用域

在这里插入图片描述

var n=100;//全局变量
function fun1(){
	var n1=50;//局部变量
	n=200;//使用全局变量n
}

function fun2(){
	n=n-50;//使用的全局n
}

function fun3(){
	console.log(n);
	console.log(n1);//因为n1是局部变量所以报错
}

fun1();
fun2();
fun3();

在这里插入图片描述

比较运算符

在这里插入图片描述

var x=10;
var flag=x>50;
console.log(flag);

在这里插入图片描述

var x=10;
var flag=x<50;
console.log(flag);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

var x=1;
var y=2;
var z=3;

var flag=x<10 && y<5 && z>20;//任何一个不满足条件为false
console.log(flag);

在这里插入图片描述

var x=1;
var y=2;
var z=3;

var flag=x<10 || y<5 || z>20; //任何一个满足条件为true
console.log(flag);

在这里插入图片描述

var x=1;
var y=2;
var z=3;

var flag=(x<10) || y>5 && z>20;
console.log(flag);

在这里插入图片描述

var x=1;
var y=2;
var z=3;

var flag=(x<10) && y>5 && z>20;
console.log(flag);

在这里插入图片描述
在这里插入图片描述

var x=1;
var y=2;
var z=3;

var str=x>10?"大于":"小于";
console.log(str);

在这里插入图片描述

var x=100;
var y=2;
var z=3;

var str=x>10?"大于":"小于";
console.log(str);

在这里插入图片描述

程序控制语句

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>

</body>
</html>

条件控制语句

var n=10;
var str;
if(n>10){
	str="n>10";
}else{
	str="n<=10";
}
console.log(str);

在这里插入图片描述

var n=10;
var str;
if(n>10){
	str="n>10";
}else if(n<10){
	str="n<10";
}else{
	str="n=10"
}
console.log(str);

在这里插入图片描述

多条件控制语句

成绩100 显示满分，大于90显示优秀，大于70和80显示良好，大于60显示及格，其他不及格

var myscore=95;
var str;
var n=parseInt(myscore/10);

switch (n) {
	case 10:
		str="满分"
		break;
	case 9:
		str="优秀"
		break;
	case 8:
	case 7:
		str="良好"
		break;
	case 6:
		str="及格"
		break;
	case 5:
	case 4:
	case 3:
	case 2:
	case 1:
		str="不及格"
		break;
	}
	console.log(str);

在这里插入图片描述

var myscore=50;
var str;
var n=parseInt(myscore/10);

switch (n) {
	case 10:
		str="满分"
		break;
	case 9:
		str="优秀"
		break;
	case 8:
	case 7:
		str="良好"
		break;
	case 6:
		str="及格"
		break;
	default:
		str="不及格"
		break;
	}
	console.log(str);

在这里插入图片描述

循环类控制语句

for while do-while 循环

//1+2+3+4+5+.....+100=5050

var i;
var sum=0;
for(i=0;i<=100;i++){
	sum=sum+i;
}

console.log(sum);

在这里插入图片描述

var i;
var sum=0;
for(i=0;i<=100;i++){
	if(i % 2 == 0){
		continue;
	}//计算奇数的和，continue：一旦满足了if条件 continue后面的就不执行了
	sum=sum+i;
}

console.log(sum);

在这里插入图片描述

//1+2+3+4+5+.....+100=5050

var i;
var sum=0;
for(i=0;i<=100;i++){
	if(i % 2 != 0){
		continue;
	}//计算偶数的和，continue：一旦满足了if条件 continue后面的就不执行了
	sum=sum+i;
}

console.log(sum);

在这里插入图片描述

var i;
var sum=0;
for(i=0;i<=100;i++){
	if(i % 2 == 0){
		continue;
	}
	if(sum>=1000){
		break;
	}
	sum=sum+i;
}

console.log(sum);

在这里插入图片描述

//1+2+3+4+5+.....+100=5050

var i=0;
var sum=0;
while (i<=100) {
	sum=sum+i;
	i++;
}

console.log(sum);

在这里插入图片描述

内置函数

在这里插入图片描述

字符串截取

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>

</body>
</html>

var str="520134199906061234"
console.log(str.substr(0,3));//0开始3长度
console.log(str.substring(6,10));//0开始10结束
var n=console.log(str.charAt(16));//取对应位置的字符
if(n%2==0){
	console.log("女");
}else {
	console.log("男");
}
console.log(str.length);//字符串长度
console.log(str.indexOf(3));//找到第一次出现3的位置
console.log(str.indexOf(3,5));//查找3从位置5开始找到第一个3

在这里插入图片描述

数组操作

var str="aa,bbb,123,cc,dd,55";
var arr=str.split(",");
console.log(arr);
console.log(arr[0]);//按位置查找
console.log(arr[3]);
console.log(str.concat("66","00","abc"));//连接
console.log(str.concat(",66",",00",",abc"));
console.log(arr.concat("66","00","abc"));
console.log(str.replace("aa","替换"));//替换第一个

在这里插入图片描述

日期操作

var d1=new Date();//获取当前时间
var d2=new Date("2023-5-30");//自定义时间
console.log(d1)
console.log(d2)
console.log(d1.getDate());//当前天数
console.log(d1.getMonth()+1);//月 从0开始， 0-11
console.log(d1.getFullYear());//年
console.log(d1.getHours());//时
console.log(d1.getMinutes());//分
console.log(d1.getSeconds());//秒

var n=d2.getTime()-d1.getTime();//计算d1与d2相差多少天
console.log(parseInt(n/(24*3600*1000)));

//日期格式化
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=3.1415926;
console.log(Math.round(n));//取整
console.log(n.toFixed(2));//保留2位小数

console.log(Math.min(1,2,3,4,5));//最小值
console.log(Math.max(1,2,3,4,5));//最大值

console.log(Math.abs(-3));//绝对值

在这里插入图片描述

数组

//声明或创建一个不指定长度的数组，又称实例化创建
var kk1=new Array();
console.log(kk1);
//声明或创建一个数组并指定长度的数组
var kk2=new Array(5);
console.log(kk2);
//声明或创建一个带有默认值的数组
var kk3=new Array(1,2,3,4,5,6);
console.log(kk3);
//创建一个数组并赋值的简写，又称隐式创建数据
var kk4=[1,2,3,4,5,6];
console.log(kk4);

在这里插入图片描述

var kk=[1,2,3,4,5,6];
//数组赋值、字符下标、数组遍历
console.log(kk[0]);
for(var i in kk){
	console.log(i);
}//遍历

在这里插入图片描述

表单

在这里插入图片描述

单击弹窗

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
	<form>
		<label>用户名</label>
		<input type="text" id="username"name="username">
		<input type="button" id="按钮" onclick="show1()" value="按钮"/>  
		<!--onclick单击后执行js里面的show1-->
	</form> 
</body> 
</html>

function show1(){
	alert("123456")
}

在这里插入图片描述

单击填入

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
	<form>
		<label>用户名</label>
		<input type="text" id="username"name="username">
		<input type="button" id="按钮" onclick="show1()" value="按钮"/>  
		<!--onclick单击后执行js里面的show1-->
	</form> 
</body> 
</html>

function show1(){
	document.getElementById("username").value="test";
}//按元素id获取属性，同时对value进行设置

在这里插入图片描述在这里插入图片描述

页面加载

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body onload="show1()"><!--页面刷新执行show1-->
	<form>
		<label>用户名</label>
		<input type="text" id="username"name="username">
		<input type="button" id="按钮" onclick="show1()" value="按钮"/>  
		<!--onclick单击后执行js里面的show1-->
	</form> 
</body> 
</html>

function show1(){
	document.getElementById("username").value="test";
}//按元素id获取属性，同时对value进行设置

在这里插入图片描述

单选按钮

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
	<form>
		<label>用户名</label>
		<input type="text" id="username"name="username"><br>
		<input type="radio" name="xb" value="1" checked="checked">男<!--默认选中-->
		<input type="radio" name="xb" value="0">女<br><!--单选按钮-->
		<input type="button" id="按钮" onclick="show1()" value="按钮"/>  
		<!--onclick单击后执行js里面的show1-->
	</form> 
</body> 
</html>

function show1(){
	document.getElementById("username").value="test";//按元素id获取属性，同时对value进行设置
	var xb=document.getElementsByName("xb");//按元素name获取属性
	var xbtest;
	if(xb[0].checked){
		xbtest=xb[0].value;
	}else {
		xbtest=xb[1].value;
	}//单击按钮弹窗 选择男1选择女0
	alert(xbtest);
}

在这里插入图片描述
在这里插入图片描述

列表框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body onload="ymd()">
	<form>
		<select name="yyyy" id="yyyy"></select>年
		<select name="mm" id="mm"></select>月
		<select name="dd" id="dd"></select>日
	</form>
</body> 
</html>

function ymd(){
	var yyyy=document.getElementById("yyyy");//获取id=yyyy的表单元素
	var mm=document.getElementById("mm");
	var dd=document.getElementById("dd");
	var date=new Date();
	var year=parseInt(date.getFullYear());//获取当前年份
	for (var i=1999;i<=year;i++){
		yyyy.options.add(new Option(i,i));
	}
	for (var i=1;i<=12;i++){
		mm.options.add(new Option(i,i));
	}
	for (var i=1;i<=31;i++){
		dd.options.add(new Option(i,i));
	}


}

简写

function ymd(){
	var yyyy=document.getElementById("yyyy");//获取id=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);
}

//给列表框赋值，传递三个参数，表单元素，开始值，结束值
function initselect(obj,start,end){
	for(var i=start;i<=end;i++){
		obj.options.add(new Option(i,i));
	}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三级联动闰年大小月优化

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body onload="ymd()">
	<form>
		<select name="yyyy" id="yyyy" onchange="selectymd()"></select>年
		<select name="mm" id="mm" onchange="selectymd()"></select>月<!--onchange改变事件-->
		<select name="dd" id="dd"></select>日
	</form>
</body> 
</html>

function ymd(){
	var yyyy=document.getElementById("yyyy");//获取id=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);
	//将某个条目数设置为零，效果=删除
	// dd.options.length=0;
}

//给列表框赋值，传递三个参数，表单元素，开始值，结束值
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 || mm==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);
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

删除

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body onload="ymd()">
	<form>
		<select name="yyyy" id="yyyy" onchange="selectymd()"></select>年
		<select name="mm" id="mm" onchange="selectymd()"></select>月<!--onchange改变事件-->
		<select name="dd" id="dd"></select>日
		<input type="button" value="删除" onclick="deleteselect()">
	</form>
</body> 
</html>

function ymd(){
	var yyyy=document.getElementById("yyyy");//获取id=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);
	//将某个条目数设置为零，效果=删除
	// dd.options.length=0;
}

//给列表框赋值，传递三个参数，表单元素，开始值，结束值
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 || mm==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);//删除下标为1的
}

在这里插入图片描述
删除全部

function ymd(){
	var yyyy=document.getElementById("yyyy");//获取id=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);
	//将某个条目数设置为零，效果=删除
	// dd.options.length=0;
}

//给列表框赋值，传递三个参数，表单元素，开始值，结束值
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 || mm==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);//删除下标为1的
	for(i=0;i<dd.length;i++){
		dd.options.remove(i);
	}//删除全部
}

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

图片与列表框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body onload="ymd(),initlogo()">
	<form>
		<select name="yyyy" id="yyyy" onchange="selectymd()"></select>年
		<select name="mm" id="mm" onchange="selectymd()"></select>月<!--onchange改变事件-->
		<select name="dd" id="dd"></select>日
		<input type="button" value="删除" onclick="deleteselect()"><br>
		<img id="logoimg" src="img/1.gif">
		<select id="logo" onchange="selectlogo()"></select>
	</form>
</body> 
</html>

function ymd(){
	var yyyy=document.getElementById("yyyy");//获取id=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);
	//将某个条目数设置为零，效果=删除
	// dd.options.length=0;
}

//给列表框赋值，传递三个参数，表单元素，开始值，结束值
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 || mm==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);//删除下标为1的
	for(i=0;i<dd.length;i++){
		dd.options.remove(i);
	}//删除全部
}

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="img/"+n+".gif";
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

复选框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>javascript</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
	<form>
		<input type="checkbox" name="interest" value="1"/><label>游戏</label>
		<input type="checkbox" name="interest" value="2"/><label>学习</label>
		<input type="checkbox" name="interest" value="3"/><label>游泳</label>
		<input type="checkbox" name="interest" value="4"/><label>爬山</label>
		<input type="button" id="btn1" value="全选" onclick="checkinterest()">
		<input type="button" value="反选" onclick="checkinterest1()">
	</form>
</body> 
</html>

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;//开关变量 第一次true 第二次fales
}

function checkinterest1(){
	var interest=document.getElementsByName("interest");
	for(i=0;i<interest.length;i++){
		interest[i].checked=!interest[i].checked;
	}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

gemoumou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端-javascript-基础知识-总结笔记
02-25
个人学习javascript的笔记总结
前端框架---react基础
07-16
**React 基础概述** React 是一个用于构建用户界面的 JavaScript 库，它强调的是组件化开发，使得开发者能够将复杂的应用拆分成独立、可重用的小块，每个小块称为组件。React 的核心理念是让开发人员专注于数据和...
深入理解：js标签中的type=“text/JavaScript“，表示什么意思
weixin_48033662的博客
07-25 3002
一·案例代码如下： <script type="text/javascript"> function onchangeFun() { //注意函数名不能与已经存在的关键字相同，否则会出错！ alert("男神已经改变!") } </script> 二·type=“text/javascript”，表示什么意思？ 表示将< script>< /script>之间的文本内容，在浏览器
HTML中调用JavaScript的几种情况和规范写法
a998lg的博客
01-24 1648
比较简单，基础。 一、引用外部文件中的js脚本 script type="text/javascript" src="ext.js">script> 也可以象下面这样写，language不是必要的，但是推荐上面的写法 script language="javascript" type="text/javascript" src="ext.js">script>
慕课JavaScript基础学习笔记
Hy-Vincent的博客
04-04 324
插入JS 如何写入JS代码？你只需一步操作,使用标签在HTML网页中插入JavaScript代码。注意， 标签要成对出现，并把JavaScript代码写在之间。 表示在之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。 引用JS外部文件 JavaScript代码只能写在HTML文件中吗?当然不是，我们可以把HTML文件和JS代码
html 利用jq隐藏p,jq简单实现切换隐藏与显示并执行函数
weixin_34768234的博客
06-04 361
HTML前端的很多的动画效果，都是靠js(javascript)来完成的，而作为js的一个功能的封装插件jq(jquery),可以很方便的通过调用函数的方式，来实现一些功能，这也加快了前端的开发速度。今天就说说利用JQ中封装的hide()方法和show()方法对HTML DOM中的DIV元素实现隐藏与显示之间的切换，并在切换完成时调用函数。jQuery hide() 和 show()方法语法：$...
html点击隐藏当前显示另外,点击显示指定元素隐藏其他同辈元素的方法
weixin_34668147的博客
06-04 498
//$(function(){var $div_li =$("div.tab_menu ul li");$div_li.click(function(){$(this).addClass("selected") //当前元素高亮.siblings().removeClass("selected"); //去掉其它同辈元素的高亮var index = $div_li.index(this); // ...
javaWeb-前端js基础
最新发布
03-09
javaWeb-前端js基础
Web前端开发 北京林业大学 JavaScript基础-单元测试
01-08
JavaScript基础 单元测试6 单元作业4 JQuery & HTML5 & Bootstrap 单元测试7 期末考试 客观选择题 这个还是自己写吧 1.toString()的作用是（ ）。 编号 选项 A 将任意类型的数据转换为字符串类型 ...
web前端js基础-制作滚动图片
11-07
图片资源
<script type="text/javascript" src="">
笑儿--永不凋零的梦想
05-28 7555
示在该网页页面当中插入了一个JS脚本文件
JavaScript不能读取script标签src文件内容
qq_24520119的博客
04-13 1万+
script标签 通常我们页面中创建script标签时要么src引入外部js文件： 要么直接在标签内写内容： 这里是script标签里的内容 script标签有一个属性type，默认值：text/javascript，例如你直接声明一个script标签，如果不声明type标签就默认为js文档。 var a = 50; alert(a); // 50
HTML页面的<script type="text/javascript">含义。
热门推荐
看不过的黑工坊
04-27 2万+
在老的HTML版本，如果需要在HTML页面中声明一段js脚本，需要做的声明，表明在 和 中添加的文本是js脚本； 在HTML5以后， HTML5的默认脚本语言是就是，所以无需显示声明 type="text/javascript" ，直接使用即可。
JS | 涉及字符串的内置函数的一些题目
m0_72383454的博客
08-18 138
今天我们来学一下关于字符串的一些内置函数以及我们经常会遇到的一些题目。
前端页面select标签
jiyukun1的博客
09-03 4284
前端页面select标签 （1）前端页面的select标签disabled=“disabled”时不能向后台传送数据 （2）可以采取措施在提交的时候将disabled的属性去除 var data = $("#<%=divID %>edit2").find("select[name='holidaySettlementSumFlag']"); data.prop("disabled",false); （3）通过添加input标签实现数据传值的操作，input的标签的值随着option标签的值的改
python基础-07-元组/字典的常用基本操作
gemoumou的python学习实记
08-15 2003
题目1 •敏感词判断 li = [“苍井空”,“波多野结衣”,“武藤兰”,“东京热”] •将用户输入的敏感词替换成* •敏感词的长度等于* 如 苍井空等于*** •输入内容 gpc特别喜欢苍井空，偶尔也喜欢波多野结衣，自从放弃了东京热，生活乐无边 content = input (">>>") li = ["苍井空","波多野结衣","武藤兰","东京热"] for ci in li: if ci in content: #判断ci是否出现content输入中 co
python基础-02-基础的数据类型
gemoumou的python学习实记
08-16 1291
数字（Number） Python 支持三种不同的数值类型：整型（int）、浮点型（float）、复数（complex） 整型：通常称为整数，是整数或者负数，不带小数点。python3整型类型没有大小限制。int型数字：0、10 -780、-089、-0x270、0x90。 浮点型：浮点型由整数部分与小数部分组成。float型数字：0.0、15.2、-2.9、-32.5e10、32+e18。 浮点数可以用科学计算法表示：2.5e2 = 2.5 x 10^2 = 250 复数型：复数由实数部分和虚数部分构成，
vue基础-MVVM设计模式
04-30
MVVM 是一种前端架构设计模式，它将界面、数据和逻辑分离并通过 ViewModel 进行交互。在 MVVM 模式中，视图(View)和模型(Model)是完全独立的，它们通过 ViewModel 进行双向绑定(Binding)。 在 Vue.js 中，MVVM 模式被称为“响应式编程”，它的核心是数据劫持和发布订阅模式。Vue.js 的数据驱动视图，通过数据改变来更新视图，这些数据是被劫持的，也就是说，当数据发生变化时，Vue.js 会自动更新视图。 Vue.js 中的 MVVM 模式包含以下三个部分： 1. 视图层(View)：负责展示数据，通常是 HTML 模板。 2. 模型层(Model)：负责存储数据，通常是 JavaScript 对象。 3. 视图模型层(ViewModel)：负责处理视图与模型之间的交互，它是一个纯粹的 JavaScript 对象，负责实现数据绑定、数据格式化、事件监听等功能。 在 Vue.js 中，我们可以使用指令(v-directive)来实现数据绑定。指令是一种特殊的 HTML 属性，它的值通常是一个表达式，用来绑定指令所在元素的属性或事件。例如，v-bind 指令可以将一个 JavaScript 对象绑定到 DOM 元素的属性，v-on 指令可以监听 DOM 元素的事件。 除了指令之外，Vue.js 还提供了计算属性(Computed)和侦听器(Watch)等功能，用于处理数据的计算和监听数据的变化。 总之，MVVM 模式是一种前端架构设计模式，它通过 ViewModel 实现视图(View)和模型(Model)之间的双向绑定(Binding)，实现了数据的自动更新和视图的响应式。在 Vue.js 中，MVVM 模式被称为“响应式编程”，它的核心是数据劫持和发布订阅模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值