Js学习第二天

最新推荐文章于 2022-01-12 13:22:30 发布

魏俊鹏

最新推荐文章于 2022-01-12 13:22:30 发布

阅读量99

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_41592620/article/details/100806106

版权

<!--
			当鼠标移入的时候，把div的style的display变成block
			getElementByid()
			js:把右边的东西，放在左边里
		-->
		<style>
			#div1{
				color: red;
				font-size: 30px;
			}		
		</style>
	</head>
	<body>
		<label  
				onmouseout="document.getElementById('div1').style.display='none'" 
				onmousemover="document.getElementById('div1').style.display='block'" />
			<input type="checkbox" />自动登录
		</label>
		<div id="div1"">不要在网吧</div>
	</body>

<div id="div1" onmouseover="document.getElementById('div1').style.display.height='200px';
			                        document.getElementById('div1').style.display.width='200px';
			                        document.getElementById('div1').style.display.background='blue'" 
			                        >
			
		</div>
    		<style>
		/*全部的div*/
div{    
				width: 100px; height: 100px; background-color: red;
			}
			
		</style>


<div id="div1" onmouseover="document.getElementById('div1').style.height='200px';
			                        document.getElementById('div1').style.width='200px';
			                        document.getElementById('div1').style.background='blue'" 
			                        >
			
		</div>


<body>
		<div id="div1" 
			onmouseover="document.getElementById('div1').style.width='200px';
			             document.getElementById('div1').style.height='200px';
			              document.getElementById('div1').style.background='greenyellow'"
			              
			              
			              
			onmouseout="document.getElementById('div1').style.width='100px';
			             document.getElementById('div1').style.height='100px';
			              document.getElementById('div1').style.background='red';"
			            
			></div>
	</body>



<!--
			网页换肤原理：点击按钮onclick改变href的值
			通过link里的href决定链接到的样式表  c  还是c2
			<link id="link1" href="c.css" rel="stylesheet" type="text/css" />
		-->
		<link id="link1"  rel="stylesheet" type="text/css" />
		<script type="text/jscript">
			function hf1(){
				document.getElementById('link1').href='css/c.css'
			}
			function hf2(){
				document.getElementById('link1').href='css/c2.css'
			}
		</script>
	</head>
	<body>
		<dl id="message">
			<form>
				<dt>
					<strong>可以换肤的提示框：</strong>
					<input id="btn1" type="button" value="皮肤1" 
						onclick="hf1()" />
						<input id="btn2" type="button" value="皮肤2" 
						onclick="hf2()" />
				</dt>
				<dd>输入姓名：<input class="text" type="text" /> </dd>
				<dd>输入密码：<input class="text" type="password" /> </dd>
				<dd>请您留言：<textarea></textarea> </dd>
				<dd class="center"><input class="btn" type="submit" value="提交" /> </dd>
			</form>
		</dl>
	</body>

	<link id="link1"  rel="stylesheet" type="text/css" />
	<script>
    function hf1(obj){
    	obj =document.getElementById('ff');
    	obj.style.background='blue';
    }
      function hf2(obj){
    	obj =document.getElementById('ff');
    	obj.style.background='yellow';
    }
	</script>
	</head>
	<body>
		<dl id="message">
			<form id="ff">
				<dt>
					<strong>可以换肤的提示框：</strong>
					<input id="btn1" type="button" value="皮肤1" 
						onclick="hf1(this)" />
						<input id="btn2" type="button" value="皮肤2" 
						onclick="hf2(this)" />
				</dt>
				<dd>输入姓名：<input class="text" type="text" /> </dd>
				<dd>输入密码：<input class="text" type="password" /> </dd>
				<dd>请您留言：<textarea></textarea> </dd>
				<dd class="center"><input class="btn" type="submit" value="提交" /> </dd>
			</form>
		</dl>
	</body>

2.toString()把其他的类型转换为string
null和undefined 没有toString()方法
注意：字符串和数字放一起进行运算，会自动由字符串转为数字进行运算，+号会把字符串里的数字
自动转换为number型。

	-->
	


<script type="text/javascript">
	var a=14;//number
	b=toString(a);
	console.log(b);//"14"
	console.log(typeof b);//"string"
	var a=true;
	a=toString(a);
	console.log(a);//"true"
	console.log(typeof a);
	var a="1";
	a=a+2;//字符串进行运算的时候  --》串+串==拼串
	console.log(a);
	var r=1+"2"+3;
	console.log(r);//123
	var a=1+(+"2")+3;//6
	console.log(a);
	var a=null;
	a=toString(a);
	console.log(a);
	console.log(typeof a);
	var age;
	console(toString(age));
	console.log(typeof toString(age));//不可以转
	console(toString(Object));
	console(toString(typeof Object))
	
	
	</script>

<script type="text/javascript">
		var a=14;//number
		b=a.toString();
		console.log(b);//"14"
		console.log(typeof b);//"string"
		var a=true;
		a=a.toString();
		console.log(a);//"true"
		console.log(typeof a);
		var a="1";
		a=a+2;//字符串进行运算的时候  --》串+串==拼串
		console.log(a);
		var r=1+"2"+3;
		console.log(r);//123
		var a=1+(+"2")+3;//6
		console.log(a);
		var a=null;
		a=a.toString();
		console.log(a);
		console.log(typeof a);
		var age;
		console(age.toString());
		console.log(typeof toString(age));//不可以转
		console(toString(Object));
		console(toString(typeof Object))
		
		
		</script>

	<script type="text/javascript">
//		var a=14;//number
//		b=a.toString();
//		console.log(b);//"14"
//		console.log(typeof b);//"string"
//		var a=true;
//		a=a.toString();
//		console.log(a);//"true"
//		console.log(typeof a);
//		var a="1";
//		a=a+2;//字符串进行运算的时候  --》串+串==拼串
//		console.log(a);
//		var a=10;
//		a=a+2;
//		console.log(a);
//		var r=1+"2"+3;
//		console.log(r);//123
//		var a=1+(+"2")+3;//6
//		console.log(a);
//		var a=null;
//		a=a.toString();   
//		console.log(a);
//		console.log(typeof a);  
//		var age;
//		console(age.toString());
//		console.log(typeof toString(age));//不可以转
//		console(toString(Object));
//		console(toString(typeof Object))
   var a=123;
   a=String(a);
   console.log(a);//"123"
   console.log(typeof a);//string
		
		
		</script>

//String()有参函数：null->null undefined–>undefined 其他都可以转换为string类型
//boolean 和Number类型都是调用了toString()方法，null和undefined没有toString()方法

 var a=123;
 a=String(a);
 console.log(a);//"123"
 console.log(typeof a);//string
var a=false;
 a=String(a);
 console.log(a);//"false"
 console.log(typeof a);//string
		
var a=null;
 a=String(a);
 console.log(a);//"null"
 console.log(typeof a);//string
var gf;//定义变量没有初始化  ==未定义
 gf=String(gf);
 console.log(gf);//"undefined"
 console.log(typeof gf);//string
		
var a="愿你三冬暖，" +"\r"+
"愿你春不寒，"+
"愿你天黑有灯，"+
"下雨有伞，"+
"愿你善其身，"+
"愿你遇良人，"+
"暖色浮余生，"+
"有好人有伴";
document.write(a);

//Number()参数放进去
//1.字符串–>Number 数值类型直接转换，只要出现了非数值类型的变为NaN
// 空格或者空串返回0
var y=“123”;
console.log(Number(y));//123
console.log(typeof Number(y))//number
var y=“123px789”;
console.log(Number(y));//NaN not a number
console.log(typeof Number(y))//number
var y=“123789px”;
console.log(Number(y));//NaN not a number
console.log(typeof Number(y))//number
var y=“123.456”;
console.log(Number(y));//123.456
console.log(typeof Number(y))//number
var y=“o123.456”;
console.log(Number(y));//NaN
console.log(typeof Number(y))//number
//空串或者空格
var mv="";
console.log(Number(mv));//0
console.log(typeof Number(mv))//number
var mv=" ";
console.log(Number(mv));//0
console.log(typeof Number(mv))//number

//2.布尔-->Number
var y=true;
console.log(Number(y));//1
console.log(typeof Number(y))//number
var y=false;
console.log(Number(y));//0
console.log(typeof Number(y))//number
//3.null-->Number
var y=null;
console.log(Number(y));//0
console.log(typeof Number(y))//number
//4.undefined-->Number
var mv;
console.log(Number(mv));//NaN
console.log(typeof Number(mv))//number

var yu=070;
document.write(yu);
yu=parseInt(yu,10);
yu=0X10;
console.log(yu)
document.write(yu);
yu=parseInt(yu,10);
console.log(yu);
var yu=70;
document.write(yu);
yu=parseInt(yu,16);//控制进制转换为哪个进制    把yu转换为16进制的
console.log(yu);

//进制问题：在不同浏览器结果可能不一样
//       16进制：以0x开头
//       8进制：以0开头
//       二进制：0b
var yu=070;
console.log(yu);
yu=0X10;
console.log(yu);
yu=0b10;//二进制有问题！！！！   
console.log(yu)