用了javascript却没有效果------解决方案-----写着写着成了笔记了!

44 篇文章 0 订阅
订阅专栏
19 篇文章 0 订阅
订阅专栏

发展经历

javaScript是一门脚本语言,运行在浏览器中的(需要由浏览器支持----即浏览器带有其解释器)
在这里插入图片描述

特点:

  1. 简单,规模小不需要编译运行速度快;
  2. 是一门基于对象的语言;
  3. 有事件进行驱动;
  4. 定义变量也很简单 var a,b,c 没有数据类型的限制;

代码操练

JavaScript 是 web 开发者必学的三种语言之一:

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

先简单试一下:
一般html js 与css共同来开发网页使得网页具有了交互性;

js的引入方式一----->内联式引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是网页标题</title>
		<!--
		内嵌式引入方式
		1,head标签中,用一对script标签,嵌入js代码
		type 属性可以省略不写
		-->
		<script type="text/javascript">
		
		
		function func(){
			/*弹窗提示*/
			alert("你好")
		}
		</script>
		
	</head>
	<body>
		<input type="button"   value="点我呀"  onclick="func()"/>
	</body>
</html>

js的引入方式二-----外部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="js/jstype.js">
			
		</script>
		<input type="button"  value="点我呀!!!!" onclick="fun1()" />
	</body>
</html>

js文件

		function fun1(){
		/*弹窗提示*/
		alert("你好,又见面了!!!")
}

常见错误原因---->

一些小错误产生的原因------
用了javascript标签设置交互效果,但是没有效果出现
可能的原因-----在设置交互时没有写括号;

在这里插入图片描述可能的原因----> 函数中缺少必要的{}

在这里插入图片描述可能的原因------>js文件引入的位置不对在这里插入图片描述
可能内敛和外链混用了
比如下面这个代码----->
在这里插入图片描述在调试的时候也会提示我们,相应在哪里错了;在这里插入图片描述

内敛引入和外链引入的优先级

在这里插入图片描述

  1. **外链方式的复用度比内敛方式要好,
  2. 降低了代码维护难度
  3. 一个页面可以引入多个js文件
    这个css样式表是一样的逻辑;

js的ECMA部分

数据类型

js中数据类型
数值类型(number)----将整形和浮点型通通视为数值类型
字符串类型----用双引号或者单引号括起来表示
布尔类型-----true/false
空(null)-----表示没有值,不存在的引用,但并不等于空字符串或者0
未定义(undefined)值----表示虽然定义了,但是没有赋值
Object类型-----复合数据类型包括对象和数组

		<script type="text/jscript">
		/* 
		js中是弱类型脚本语言
		1,所有的变量的数据类型用var 声明
		2,先声明后赋值也是可以的---这中方式在声明时并不知道数据类型,而是在赋值的时候才知道
		3,js中变量可以被反复声明,后声明的会将前面的覆盖	
		4,js中可以不用分号作为结尾,每一行代码都是一个独立的语句
		5,再给变量赋值可以改变变量的数据类型;
		6,基本数据类型之外时符合数据类型----OBJECT
		7,js中标识符与命名规则与java中保持一致即可,避免用$起名
		*/
	   
	  /* <!--整数和小数都叫number类型--> */
		var a=10.9999999999999;
		a=10000000;
		alert (a);
		var i;
		i=12;
		alert(i);
				var aa;
		aa="3.24";
		alert (aa);		
		/* 字符串类型 */
		var b;
		b="你好";
		
		alert(b);
	/*空值类型 */
		var c=null;
		alert(c);
		/* typeof返回数据的类型*/
		alert(typeof b);
		alert(typeof a+ "你好") ;
		/* 布尔类型 */
		var q=true;
		alert(typeof q);
		var p =1>2;
		alert(p);
		/* 数组 */
		var t=[1,2,3,4,5,6];
		alert(t);
		alert(typeof t);
		//其他引用数据类型
		var y=new Date();
		alert(y);
		alert(typeof y);

运算符

大部分编程语言的基本运算符号时差不多的,在js中一些运算符号对比java会有一些差别
在这里插入图片描述在这里插入图片描述基本运算符跟java差不多;

/* 	// 加减乘除
			alert("1+1="+(1+1));
			alert((10-2)+"=10-2");
			alert(10*10+"=10*10");
			alert(100/10+"=100/10");
			//除不尽的会进行四舍五入操作
			alert("10/3="+10/3);
			//取模与递加递减操作
			var i;
			i=1;
			alert("i=1,输出i++后的值"+(i++));
			var j=1;
			alert("j=1,输出++j后的值"+(++j));
			var k=1;
			alert("输出k--的值"+(k--));
			var m=1;
			alert("输出--m的值"+(--m));
			// 赋值运算
			var a=8;
			b=a;
		alert("a=8,b=a求b的值"+b); */
		//除以0的结果
		//alert(10/0);//结果时是Infinity,而不是报错
		//alert(10%0);//NaN---意思是not a number
		/* alert(12.6/0);//infinity
		alert(12.6%8);//4.6
		alert(12.6%3.4);//2.4
		
		var c,d;
		c=1;d=2; */
		//c+=d;
		//alert("c=1;d=2,c+=d之后求c的值"+c);//3
		//c-=d;
		//alert("c=1;d=2,c-=d之后求c的值"+c);//-1
	   //	c*=d;
		//alert("c=1;d=2,c*=d之后求c的值"+c);//2 
		//c/=d;
		//alert("c=1;d=2,c/=d之后求c的值"+c);//0.5
		
		/* 关于+号即是运算符也是连结符号 */
		//如果两端有至少一端是字符串则是连接符,如果是数字则是运算符
		
		//alert("true+1的值"+true+1);
		//布尔类型做运算时会将true视为1,false视为0
		//alert(true+1);//2
		//alert(100-false);//100
		
		
		
		//关于== 号
		//alert(1==1);//true
		
		//alert("你好"=="你好");//true
		//alert(1=="你好");//false
		
		alert (1==true);
		alert(false==0);
		//会进行强制类型转换
		/* 先比较类型,如果类型一致,再比较内容,
		如果类型不一致,会强制转换为number再比较内容 */
		//alert(1=="1");//true
		/* === 号 */
		/* 数据类型不同 直接返回false如果类型相同 才会比较内容 */
		alert(1===1);//true
		alert(1==="你好");//false
		alert(1==="1");//false
		alert (1===true);//false
		alert(false===0);//false

流程控制

基本的流程控制跟java中的差不多

  1. 顺序结构 略
  2. 分支结构 if switch
  3. 循环结构 while,do while, for循环 ,foreach循环
if 分支
//输出该月的季节
		var i=10;
			
		if(i==12||i==1||i==2){
			alert("冬季")
		}else if(i>=3&&i<=5){
			alert("春天");
		}else if(i>=6&&i<=8){
			alert("夏天");
		}else {
			alert("秋天");
		}
switch分支
var j=12;
   		switch(j){
   			case 12:
   			case 1:
   			case 2:
   			alert("大约在冬季");
   			break;
   			case 3:
   			case 4:
   			case 5:
   			alert("好像在盛夏");
   			break;
   			case 6:
   			case 7:
   			case 8:
   			alert("金黄的秋天");
   			break;
   			default:
   			alert("凛冽的冬天");
   			break;
   		}
while循环
var r=0;
			while(r<3){
				alert(r);
				r++;
			}
do while循环
	//求0-100的和
			var t=0;
			var result=0;
				
			do {
				result+=t;
				t++;
				
			}while(t<101)
			alert(result);
for循环
var q=[0,1,2,3];
			for (var i = 0; i < q.length; i++) {
				alert(q[i]);
			}

数组

数组的声明跟java中不一样,var q =[0,1,2,3]
方式一直接指定数组

var q=[0,1,2,3];
			for (var i = 0; i < q.length; i++) {
				alert(q[i]);
			}

方式二,先声明后给数组赋值

	var array= new Array();
			array=[1,2,3,4,5,6,7,8,9];
			array[0]=8;
			console.log(array);

方式三—创建给定长度的数组

var array= new Array();
	array=[1,2,3,4,5,6,7,8,9];
			array[0]=8;
			alert(array[0]);
			console.log(array);//控制台打印数组
			//alert(array);
			// 创建定长数组
			var arr= new Array(5);
			console.log(arr);

在控制台查看信息—
在这里插入图片描述数组中存放的元素可以是任意类型的;

例如:

在这里插入图片描述获取数组元素与数组的扩容----
类似于Java,可以用下表来获取数组元素,可以根据循环来遍历数组;
数组的扩容----两种方式
第一种是修改索引长度来修改数组的长度
第二种方式是修改下标来修改数组的长度

var arr =[1,2,3];
			
			document.write("数组的元素--{")
			for (var i = 0; i < arr.length; i++) {
					
				if(i==arr.length-1){
					document.write(arr[arr.length-1]+"}")
				}else{
					document.write(arr[i]+",");
				}							
			}
			
			document.write("数组长度--"+arr.length);
			//通过长度修改数组的长度;
			arr.length=5;
				document.write("扩容后的数组的元素--{")
			arr[4]="helloworld";
			for (var i = 0; i < arr.length; i++) {
					
				if(i==arr.length-1){
					document.write(arr[arr.length-1]+"}")
				}else{
					document.write(arr[i]+",");
				}							
			}
			//通过索引可以需改数组长度
			arr[10]=99;
			alert(arr.length);
/* foreach循环 
			遍历的i是索引而不是元素
						*/
			
			for(var i in arr){
				alert(arr[i]);
			}

数组中常用方法

		 var array=[1,"hello",2,"world",3,"js",4,"java"];
			document.writeln("有返回");
			document.write(array.indexOf("hello"));//1
			document.writeln("没有返回");
	document.write(array.indexOf(8));//-1
			
			//数组的合并
			var array1=[5,"hellow",6,"word",7,"jscript",8,"java#"];
		var family =array.concat(array,array1);
		console.log(family);
		//alert(family);
		//数组中元素拼合,
		var c=array.join("---");//可以规定连接符
		console.log(c);
		document.write(typeof c);
		//数组元素的添加和删除
		var a=array.pop();//删除最后一个元素,返回最后一个元素的值,数组数组长度减少
		document.write("pop后数组长度--"+array.length)
		alert(a);//java
		var b=array.push("今天天气不错呀!!")//添加元素,数组长度增加
		document.write("push后数组长度--"+array.length)
		alert(b);//8  返回添加进去的元素的下标,可以看到js中数组就类似于java中的集合
		//数组中的元素移位
		
		var aq=array1.shift();//5--- 返回被移除的第一个元素,其余元素向低位移动,驻足长度对应减少
		console.log(array1);
		alert(array1.length);//7
		alert(aq);//5
		//像数组中第一个位置添加元素,其余元素向高位移动
		 var v=array1.unshift("hellokity")
		document.write(v);//8--返回新数组的长度
		//总结一下,移除时返回的时元素,增加时返回数组的长度
		//修改数组中元素
		var array3=[1,2,3];
		//通过下标来修改
		array3[2]="hello";
		//添加元素
		/* 从前面添加用push();
		从后面添加用下标
		 */
		array3.push("你好");//返回数组的长度
		array3[array3.length]="helloworld";
		
		alert(array3);//1,2,hello,你好,helloworld 
		
	//移除元素---delete
	var t=	delete array3[0];//true移除元素位置为 undefined
		console.log(t);
		
		 
		//添加和删除元素同时进行
		var array5=[1,1,1,1,1,1,1,1,1,1];//10个元素
		
		var bian=array5.splice(2,2,"2","2","2");//在第二个位置添加元素,删除两个,返回的值时删除的元素
		alert(bian);
		
		alert(array5);
		
		
		
		//可以通过调整splice的参数来达到删除元素的目的
		var array6=[1,1,1,1,1,1,1,1,1,1];//10个元素
		var y=array6.splice(2,3);
		alert(y);
		alert(array6);
		//合并数组--返回一个新数组
		var uu=array6.concat(array,array5);
		console.log(typeof uu);
		console.log(uu);
		
		//也可以通过concat方法向数组中添加元素,返回一个 新数组
		var arr1 = ["Emma", "Isabella"];
		var myChildren = arr1.concat("Jacob", "Michael", "Ethan"); 
		alert(myChildren);
				
		//数组的分割
		var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
		var citrus = fruits.slice(3); //从下标为3的开始切割,返沪i一个新数组
		var citrus = fruits.slice(1, 3); //从下标为1开始取到下标为3截至返回新数组;(范围[)     )

对象

var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

JS中的函数

函数的格式

function 函数名(参数列表){
方法体
}
或者
var 函数名 =function (参数列表){
方法体
}

或者
var 方法名 =new Function(‘js代码’);


			function methodA(){
				document.writeln("你好")
			}
		</script>
		<button  style="width: 5.25rem;height: 2.25rem;"  value="提交"  onclick="methodA()"></button>
		
		<script type="text/javascript">
				
			var methodB= function(){
				alert("helloworld");
			}
			
			var methodC = new Function('alert("这是第三种方式")');
			methodC();
		</script>
		<input type="button" style="width: 2.625rem;height: 0.625rem;"  ondblclick="methodB()" />
	
	

带参数的函数-----

var sum =0;
			function fun1 (a,b,c){
				 sum=a+b+c;
				document.write(sum)
			}
			//调用函数
			fun1(10,20,70);
			
			
			
			var avg =function(a,b,c,d){
				return (a+b+c+d)/4;
			}
			document.write(avg(2,3,4,5));

关于参数的个数问题----
可以比定义参数个数少也可以多

	
			var avg =function(a,b,c,d){
				return (a+b+c+d)/4;
			}
			document.write(avg(2,3,4,5,6));
			

函数的参数也可以是一个函数

<script type="text/javascript">
			var sum = 0;

			function fun1(a, b, c) {
				sum = a + b + c;
				alert(sum);
			}
			//调用函数
			fun1(10, 20, 70);



			var avg = function(a, b, c, d) {
				return (a + b + c + d) / 4;
			}
			document.write(avg(2, 3, 4, 5, ));

			fun1(1, avg(1, 2, 3, 4), 3);

一下这张方式会看起来比较难以理解,只需要知道这种写法就可以了;


		function funa(i, j) {
				return i + j;
			}
			function funb(a) {
				return a(10, 20);
			}
			var sum = funb(funa)
			alert(sum)
				
			function func(b){
				return b(20,20);
			}
			var asd=func(funa);
			alert(asd);		
			
			function methodA (a,b,c,d){
				return a-b+c-d;
			}
			function methodB(h){
				return h(1,2,3,4)
			}
			var t=methodB(methodA);
			alert(t);
			

这种方式-----可以理解为(以methodA和methodB为例)
methodA正常定义,methodB传入参数h,h包含四个数,然后嚷着四个参数干嘛呢?
想让他们做加减运算,可以把methodA方法名传入(不要带括号,因为带括号的话理解为你还要往里面传参数,不带的话就相当于把方法methodB的参数传入到MethodA中),以达到目的;

JS中的对象

字符串对象----String

	var str="helloworld"
			var c=str.charAt(8);
			alert(c);
			var str1="你好世界!"
			var str3=str.concat(str1);
			document.write(str3);
			var str5=str.concat(str,str1,str3);
			alert(str5
			document.write(str.repeat(3));
			var i =str.substr(1,6);//从1截取6个
			
			var q=str.substring(1,6)//从开始到6结束
		
		console.log(i);
		console.log(q);
		
		//js中将字符产解析为JS代码运行
		
		var strstr = ' var k ="你好!!!"';		
		//alert(strstr);//' var k ="你好!!!"'		
				//alert(k);//k未定义
eval(strstr);//解析字符串为代码
alert(k);

自定义对象

			person = new Object();
			person.firstname="Gavin";
			person.lastname="Doe";
			person.age=18;
			person.eyecolor="blue";
			alert(person);
			console.log(person);//按照字母顺序排序
			document.write(person);
			
			person1= new Object();
			//使用对象构造器
			person1={firstname:"Gavin",lastname:"Doe",age:19,eyecolor:"blue"};
			alert(person1);
			
			
			
			//使用对象构造器----方法作为载体
			function girl(firstname,lastname,age,eyecolor){
				this.firstname=firstname;
				this.lastname=lastname;
				this.age=age;
				this.eyecolor=eyecolor;
			}
			// 有了构造器就可以按照构造器构造对象了
			var girlfriend=new girl("John","Tom",22,"blue");
			alert(girlfriend);
			console.log(girlfriend);
			
			// 除此之外还可以在构造中添加方法
			function boy(firstname,lastname,age,eyecolor){
				this.firstname=firstname;
				this.lastname=lastname;
				this.age=age;
				this.eyecolor=eyecolor;
				this.changename=changename;//这个不能省哦
				function changename(name){
					this.lastname=name;
				}
			
			}
			
			myfriend=new boy("Sally","Rally",48,"green");
			myfriend.changename("Tom")
			document.write(myfriend.lastname);
			console.log(boy);
			
			/* JavaScript 的对象是可变的
			
			对象是可变的,它们是通过引用来传递的。
			
			以下实例的 person 对象不会创建副本: */
			
			var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
			 
			var x = person;
			x.age = 10;           //  x.age 和 person.age 都会改变跟java中一样;
		
		    alert(person.age);
		
		/* new 和不 new的区别:
		
		    如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。
		    如果不 new 的话函数内的 this 指向的是 window。 */
		
		function person(firstname,lastname,age,eyecolor)
		{
		    this.firstname=firstname;
		    this.lastname=lastname;
		    this.age=age;
		    this.eyecolor=eyecolor;
		    return [this.firstname,this.lastname,this.age,this.eyecolor,this] 
		}
		
		var myFather=new person("John","Doe",50,"blue");
		var myMother=person("Sally","Rally",48,"green");
		console.log(myFather) // this 输出一个 person 对象
		console.log(myMother) // this 输出 window 对象
		

在这里插入图片描述

Number对象

	// document.write(Number.MAX_SAFE_INTEGER);
			// document.write(Number.MIN_SAFE_INTEGER);
			// document.write("\t")
			// document.write(Number.MAX_VALUE);
			//document.write(Number.MIN_VALUE);
			
			var t=100;
			Number.MAX_INTEGER=t;
			document.write(Number.MAX_INTEGER);
			
			//字符串解析为数字
			alert(Number.parseInt("10.234")+70);
			alert(Number.parseFloat("10")+90);
			alert(Number.isInteger(12));//判断是否为整型
			
			
			var i=10%0;//非数字
			var j=10/3;//无限循环
			document.write(Number.isFinite(i));//false
			document.write(Number.isFinite(j));//true
			document.write(Number.isNaN(i));//true
			document.write(Number.isNaN(j));//false
			

日期对象

		var d1= new Date();
			var d2= new Date("October 13,1975 11:13:09");
		var d3=new Date(79,5,24,11,33,0);
		console.log(d1);
		console.log(d2);
		console.log(d3);
		
		
		
		var x=new Date();
		x.setFullYear(2100,0,14);
		var today = new Date();
		
		if (x>today)
		{
		    alert("今天是2100年1月14日之前");
		}
		else
		{
		    alert("今天是2100年1月14日之后");
		}
		
		
		Date.prototype.format = function (fmt) {
		  var o = {
		    "M+": this.getMonth() + 1,                   //月份
		    "d+": this.getDate(),                        //日
		    "h+": this.getHours(),                       //小时
		    "m+": this.getMinutes(),                     //分
		    "s+": this.getSeconds(),                     //秒
		    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
		    "S": this.getMilliseconds()                  //毫秒
		  };
		
		  //  获取年份 
		  // ①
		  if (/(y+)/i.test(fmt)) {
		    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		  }
		
		  for (var k in o) {
		    // ②
		    if (new RegExp("(" + k + ")", "i").test(fmt)) {
		      fmt = fmt.replace(
		        RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    }
		  }
		  return fmt;
		}
		var fmt=d2.format("yyyy-MM-dd hh:mm:ss")
	alert(fmt);
	
		var now = new Date();
		var nowStr = now.format("YYYY-MM-DD"); // 2021-01-11
		var dd=new Date();
		var i=dd.getDate();//返回月份的第几天
		var ii=dd.getDay();//返回一周的第几天
		var iii=dd.getFullYear();//返会完整年份
		var iiii=dd.getTimezoneOffset();//返回
	var iiiii =dd.getYear();//返回与1900年之间的年份差
	console.log(i);
	console.log(ii);
	console.log(iii);
	console.log(iiii);	
	console.log(iiiii);
	
	var t = new Date();
	var tt = new Date("1990,10,19")
	if(t>tt){
			alert(t);
	}else{
			alert(tt);
	}

自定义对象的三种方式

	<script type="text/javascript" >	
		//创建对像=------方式一通过Object来定义
		var per= new Object();
		per.name="扎根三";
		per.age=19;
		per.gender="男";
			
		per.perinfo=function(address){
			console.log("姓名--"+this.name+"--性别--"+this.gender+"--年龄--"+this.age+"岁--"+address+"人")
		}
			console.log(per.name+"的个人信息--");
		per.perinfo("新疆");
			
			
		</script>
		<script type="text/javascript">
		//准备一个构造方法
			function Person(name,age,gender){
				this.name=name;
				this.age=age;
				this.gender=gender;
				
				this.like=function(food){
					console.log(this.name+"--"+this.gender+"--"+this.age+"--"+"喜欢吃"+food)
				}
			}
			var perp=new Person("零四十",19,"女");
			console.log(perp.name+"的个人信息----");
			perp.like('饺子');
		</script>
		
		<script type="text/javascript">
		//json
			var per={name:"张牙舞爪",
			age:19,gender:"男",
			eat:function(food){
				document.write(this.age+"岁的"+this.gender+"孩子"+this.name+"正在吃"+food);
			}
			};
			console.log(per);
			per.eat("地瓜");
		</script>

原型链结构

在这里插入图片描述

鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定与触发</title>


	</head>
	<body onload="startTime()">

		<!-- JS事件驱动型
		当单机按钮时,触发某些JS代码 
		一个事件可以同时绑定多个事件
		一个页面元素可以同时绑定躲着事件-->
		<script src="js/danji.js" type="text/javascript" charset="utf-8"></script>
		<input type="button" value="单击按钮!!!" onclick="clicked()" />
		<input type="button" value="双击按钮!!!" ondblclick="answer()" />
		<input type="button" value="单击可执行多个方法的按钮" onclick="clicked(),answer()" />
		<input type="button" value="悬停在我之上" onmouseover="over()" />

		<!-- // <embed src="music/再见亦是泪.mp3"></embed> -->

		<!-- 区别是一个是修改id匹配的内容,一个是修改当前对象的内容 -->
		<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是? </button>
		<!-- <p id='demo'></p> -->
		<!-- 修改当前对象内容 -->
		<button onclick="this.innerHTML=Date()">现在是</button>
		<div id ="demo">
想要知道事件请单击"现在的时间是?" 按钮
		</div>
		<!-- 鼠标按下----无论左键右键 -->
		<button onmousedown="this.innerHTML=Date()">点我试试看</button>
		<!-- 鼠标指上去 -->                     <!--    鼠标离开 -->
		<button onmouseenter="this.innerHTML=Date()" , onmouseleave="this.innerHTML=Date()">鼠标在我身上</button>

<button onmouseenter="getElementById('word').innerHTML=Date()" , onmouseout="getElementById('txt').innerHTML=Date()">鼠标离开我</button>
<button onmouseover="this.innerHTML=Date()"  onmouseout="this.innerHTML=Date()">鼠标来与去</button>

<button onmousewheel="this.innerHTML=Date()" > 鼠标</button>

<div id="word">
	这是第一块
</div>
<div id="txt">
	这是下一块
</div>



<div onkeydown="answer()"></div>
	</body>
</html>

鼠标事件练习----


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标事件练习</title>
		<style type="text/css">
			.d1{
				width: 12.5rem;
				height: 12.5rem;
				background-color: gold;
			}
		</style>
	</head>
	
	<body>
		<script src="js/danji.js" type="text/javascript" charset="utf-8"></script>
		<div class="d1" 
		onmouseenter="enter()"
		 onmouseout="out()"
		 onmouseup="up()"
		onmousedown="down()"
		 onmousemove="move()" 
		 onmouseover="over()"
		  onmousewheel="wheel">		
		</div>
	</body>
</html>

按键事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键事件</title>
	</head>
	<body>
		<script type="text/javascript">
				
			function fun1(){
				console.log("按键按下");
			}
			function fun2(){
				console.log("按键抬起");
			}
			function fun3(){
				console.log("按键按下又抬起");
			}
		</script>				
		<input type="text" placeholder="请输入账号"  onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
	</body>
</html>

challenge-javascript-06:Challenge-javascript-06-合并总和问题
04-15
解决方案集不得包含重复的组合。 例子 Input: candidates = [2,3,6,7], target = 7, A solution set is: [ [7], [2,2,3] ] Input: candidates = [2,3,5], target = 8, A solution set is: [ [2,2,2,2], [2,3,3]...
Code-Collection:个人博客、解决方案、遇到的问题记录、代码片段、笔记
07-24
解决方案 windows 调试安卓 webview 升级 gcc 安装 llvm git 多 ssh 账户 页面埋点 获取网络信息 页面截图 文件下载 文件上传 古怪问题 古怪问题汇总 代码片段 图片预处理 mvvm 实现 dom 操作封装 剪切板操纵 mocha ...
代码没错为啥JavaScript 内容为何运行不了
qq_48496840的博客
02-15 685
代码没错为啥JavaScript 内容为何运行不了
js引用时发现其不起作用
qq_46038677的博客
07-29 522
今天了个简单复选框全选的功能,就那几行代码结果最后搞了2个小时才功了 原因是:外部引用js时放在头部的位置,结果先解析的是jsHTML是后解析的,导致js拿不到值。 知识点:浏览器解析默认是从上往下顺序进行的。 解决办法一: 将j外部引用js放在下面的body的下面 解决方法二: 将js代码放在window.οnlοad=function(){}中即可 知识点:当文档完全加载到浏览器中时,才会触发window.onload事件。 就这么简单!!害的我找问题找半天!! ...
html加載css,js文件后沒有效果
Aochen的博客
07-26 1032
最近在做一個網站的項目,發現有些html裡面的cssjs文件加載后完全沒有效果,可以確定是加載功了,而且沒有報錯.搗鼓了很久,最後搞好了,來總結下: 1.修改完后刷新 2.清除瀏覽器緩存后刷新 3.cssjs文件的加載順序,比如說a要引用b,那麼b一定要在a之前加載 4.css或者js文件錯誤,或者不完整. 以上4個步驟幾乎可以解決大部分加載
JS 事件无效
鸟人的博客
03-03 777
对于初学者而言,在刚学JS的函数时,经常会出现各种各样的问题,的确,后端和前端代码是有区别的也造了初学前端的人来说不适应,但事实是在学习一段时间,逐渐适应JS代码的编码方式后,就能熟能生巧,下面是对于初学者常见的一些问题进行总结1.引入js不对 2.JQuery语法不对 3.利用Ajax获取数据展示时,代码较多,格式容易出错...
当我们使用vue.js没有实现效果解决方案
m0_57377352的博客
07-06 1568
vue.js代码没有实现的解决方案
Vuejs学习笔记使用指令v-model完表单的数据双向绑定
10-17
无论是简单的文本输入、复杂的表单控件,还是不同类型的输入事件,`v-model`都能提供便捷的数据双向绑定解决方案,极大地提高了开发效率。通过理解并熟练掌握`v-model`的用法,开发者能够更高效地构建交互丰富的前端...
JQuery学习笔记 nt-child的使用
10-28
一种解决方案使用`each()`函数配合`find()`,逐个处理每个表格: ```javascript $("table").each(function () { $(this).find("tr:eq(1) td:eq(1)").css("color", "red"); }); ``` 尽管这能解决部分问题,但...
FAQ-accordion-card:常见问题手风琴卡
07-24
Frontend Mentor - FAQ手风琴卡解决方案这是的解决方案。 前端导师挑战通过构建现实项目帮助您提高编码技能。目录注意:删除此笔记并根据您保留的部分更新目录。概述挑战用户应该能够: 根据设备的屏幕尺寸查看组件...
为什么在html中加不了js,为什么javascript不起作用?
weixin_30242741的博客
05-31 2549
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。页面引入JavaScript后不起作用的原因:原因一:引入js的位置不对,应在使用之前引入。原因二:引入js路径不对,所以无法使用或不起作用。原因三:引入js是标签属性错,例如:引入...
IDEA环境中JS不生效
weixin_49931066的博客
09-19 2441
解决方法: Ctrl+Alt+Shift+S打开项目配置,选择模块选项,找到存放Js文件文件夹,标记上Tests,重新发布项目运行即可,如图。在网页的过程中遇到一个扯淡的问题就是idea开发时tomcat正常运行,但是js不生效,f12控制台报错js找不到。
引入js文件不起作用
清欢
05-17 1467
异常信息 场景描述 <script type="text/javascript" src="${pageContext.request.contextPath }/dist/js/zy/index.js"></script> 异常原因 没有指定引入js文件的类型 解决方案 添加 script的type指定 <script type="text/javascri...
中的js不起作用
相信自已--努力向目标奋斗!
11-18 665
把web.config中所有utf-8改gb2312Top2 楼jacktanxd(阿东)回复于 2003-12-15 17:54:59 得分 0 是会有问题,用.inc文件代替吧,一样的!Top3 楼laughingrat(傲笑红尘)回复于 2003-12-15 17:55:12 得分 2     最好在之间     另外,看清楚路径Top4 楼mingyifei(一飞)
js加入不起作用问题
weixin_30716725的博客
11-29 170
1、控制台测试; 2、调整js位置; (PS:经常犯抽) $(function(){ }) 用于js引入中 转载于:https://www.cnblogs.com/liuyingself/p/7918714.html
html引入外部js失效不起作用的解决办法
热门推荐
Java攻城狮修炼中
07-24 1万+
问题描述: 通过script标签外部引入javascript文件,但不起作用,js代码失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登录</title> <script src="js/main.js" type="text/javascript"></script> </head> <bo
script脚本中执行方法不生效
ljj123_的博客
09-23 7576
1、   2、将script放到body的后边,方法可正常被执行  
import 'ace-builds/src-min-noconflict/worker-javascript' 没有worker-javascript
最新发布
07-16
根据你提供的代码,你尝试导入 'ace-builds/src-min-noconflict/worker-javascript',但是该路径下没有名为 'worker-javascript' 的文件。 可能的原因是你使用的 ACE Editor 版本不包含该文件。请确保你正在使用的 ACE Editor 版本是正确的,并且包含所需的 'worker-javascript' 文件。 你可以尝试检查 ACE Editor 的版本,并查看文档或相关资源,以确定正确的导入路径和所需的文件是否存在于该版本中。如果没有找到对应的文件,你可能需要升级 ACE Editor 或者考虑其他解决方案。 如果你需要进一步的帮助,请提供更多关于你使用 ACE Editor 的上下文和目标,我将尽力为你提供更准确的解决方案

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
384
原创
266
点赞
644
收藏
9436
粉丝
关注
私信
写文章

热门文章

  • 解决 ERROR 2002 (HY000): Can‘t connect to local MySQL server through socket ‘/tmp/mysql.sock‘ (111) 25811
  • 解决java.lang.NoClassDefFoundError: org/apache/logging/log4j/Logger问题 19496
  • 解决mysql中 you are not allowed to create user with grant 的问题 12880
  • Mapped Statements collection does not contain value for 解决方法 10619
  • log4j配置文件详解------自学 10530

分类专栏

  • ElasticSearch 付费 6篇
  • redis 付费 4篇
  • 集合框架 付费 21篇
  • 分布式 付费 21篇
  • 高并发 付费 29篇
  • rocketmq 1篇
  • 框架 13篇
  • Database_All 62篇
  • spring 54篇
  • python 2篇
  • 微服务 8篇
  • 前端 19篇
  • 前端框架基础 4篇
  • angular框架基础 1篇
  • Java面试系列 16篇
  • java 96篇
  • 异常 18篇
  • 工作流引擎 3篇
  • activti 3篇
  • tomcat 44篇
  • 项目 4篇
  • 大数据 18篇
  • hadoop 8篇
  • 云原生基础 4篇
  • mybatis 20篇
  • 容器 2篇
  • mysql优化 1篇
  • linux 9篇
  • github 4篇
  • nginx 3篇
  • 日志 1篇
  • 缓存 2篇

最新评论

  • elasticSearch配置

    2401_84166258: 文章构思巧妙,结构紧凑,既有深度又有广度,读后让人受益匪浅,确实是一篇值得一读的佳作。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • elasticSearch配置

    m0_61067876: 感谢大佬分享好文,学到了不少新知识,支持大佬,期待大佬持续输出优质文章!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • 简单的爬虫代码[so easy]

    普通网友: 大佬高质量文章,图文并茂,逻辑清晰,受益匪浅,期待大佬新作。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • 解决 ‘bee‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    m0_74386096: 厉害,试了很多个,终于成功了

  • 解决idea中sql语句爆红的问题

    xiaoxin4399: 妙手回春啊大夫

您愿意向朋友推荐“博客详情页”吗?

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • 七天进阶roketmq[one]
  • 七天进阶elasticsearch[Five~java操作ES]
  • 七天进阶elasticsearch[Four]
2024年12篇
2023年53篇
2022年92篇
2021年227篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeMartain

祝:生活蒸蒸日上!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或 充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值

深圳SEO优化公司深圳seo网站优化爱联外贸网站设计坂田优秀网站设计横岗网站推广工具福永模板网站建设惠州网站建设设计同乐网站制作观澜网站定制南联网站优化推广同乐模板制作惠州关键词按天扣费木棉湾营销网站龙岗网站优化推广东莞百姓网标王推广平湖建网站盐田至尊标王坪山企业网站建设坪地标王龙华网站推广工具南联百姓网标王推广坪地网站seo优化大鹏网站优化按天扣费塘坑建站观澜seo排名松岗网站定制罗湖seo南澳网站制作设计盐田网站开发大浪建网站民治网站优化歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化