JavaScript学习

最新推荐文章于 2023-09-05 22:57:12 发布

Y.IU.

最新推荐文章于 2023-09-05 22:57:12 发布

阅读量715

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46653910/article/details/108689725

版权

知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一些内置函数

可以弹出对话框的有，警示对话框：alert(),确认对话框：confirm(),提示对话框：prompt().

prompt():
用于输入内容，也可以在括号内写上输出内容。第二个引号可以在输入框内输入默认值，不输入则默认没有值。

var t = parseFloat(prompt("input：\nsss"));
			document.write(t);

显示结果为：
在这里插入图片描述

parseFloat(): 对字符串进行解析，并返回一个浮点数。
该函数首先对字符串的首位进行判断，如果是数字则进行解析，直至最后一个数字，最后返回该子串组成的数字。一般用在输入当中。

var t = parseFloat(prompt("input："));
			document.write(t);
//如果输入123 则输出123
//如果输入12aasd123 则输出12
//如果输入12.3 则输出12.3

parseInt():和parseFloat()一样，只是不能解析小数点。

var t = parseInt(prompt("input："));
			document.write(t);
//如果输入12.3 则输出12

小程序：输入一个正整数，然后逆序输出，输入一个Q结束输入，注意输入的可以不是正整数。
小知识：
1）注意在JS中除不会向下取整，用于用praseInt()对其解析，即向下取整。
2）或者用Math.floor()向下取整。
3）Math.ceil()向上取整。
4）Math.round()四舍五入。
如：

            var sum = 0,input;
			input = 123;
			alert(Math.floor(123/10));
			alert(Math.ceil(123/10));
			alert(Math.round(123/10));
			//依次输出 12  13  12.


            var sum = 0,input;
			while(true){
				input = prompt("请输入一个正数\n");
				if(input == "Q") break;
				input = parseInt(input);
				//alert(input);
				if(isNaN(input)){
					alert("输入错误，请重新输入:");
					continue;
					}
				if(input <= 0) {
				    alert("输入错误，请重新输入:");
					continue;
				}
				var s = 0;
				while(input > 0){
					s = s * 10 + input % 10;
					input = parseInt(input / 10);
				}
				alert(s);
			}

超链接调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>123</title>
		<script type="text/javascript">
			function Print(){
				alert("欢迎来到JS");
			}
		</script>
	</head>
	<body>
		<a href="JavaScript:Print()">点我一下</a>
		<!-- <a href="JavaScript:alert(333)" onclick="alert(666)">555</a>
		<a href="JavaScript:void(0);alert(333)" onclick="alert(666)">555</a> -->
	</body>
</html>

效果图：
在这里插入图片描述

Date()对象：算你活了多少天

getTime()用来获取当前时间距离1970年1月1日的毫秒数。
var b = new Date() 创建日期对象

<script type="text/javascript">
			var yd = prompt("请输入你的出生年月日，格式为xxxx/x/x.");
			var bor = new Date(yd)
			var now = new Date();
			var bd = bor.getTime();//获取出生那天距离1970.1.1的毫秒数
			var nd = now.getTime();//获取当天距离1970.1.1的毫秒数
			var ca = nd - bd;//两者相减就是活了多少毫秒
			var hs = 24*60*60*1000;//1天有多少毫秒
			var d = Math.ceil(ca/hs) ;
			alert("您已经活了"+d+"天");
		</script>

String 对象类

IndexOf：
查找子串在原串中的位置，不存在返回-1

<script type="text/javascript">
			var s = "yxl";
			document.write("x在s中的位置为:"+s.indexOf("x"));
</script>
//输出1

sub():
将指定字符串显示为下标

<script type="text/javascript">
			var s = "2";
			document.write("水的分子式为：H"+s.sub()+"O");
		</script>

charAt():
返回字符串中指定下标的字符

<script type="text/javascript">
			var s = "yxl";
			document.write(s.charAt(2));
</script>
//输出为l

自定义对象

通过Object 创建对象

<script type="text/javascript">
			var id = new Object();
			id.name = "y";
			id.cno = 123;
			id.sex = "男";
			alert("姓名:"+id.name+",学号为:"+id.cno+",性别为:"+id.sex);
		</script>

通过字面量创建对象

<script type="text/javascript">
			var id = {
				//注意每个属性用逗号分隔，并且数值不能用=，而是：
				name:"y",
				cno:123,
				sex:'男',
			};
			alert("姓名:"+id.name+",学号为:"+id.cno+",性别为:"+id.sex);
</script>

通过构造函数(Constructor)创建对象

this关键字
function()定义构造函数：

function id(name,cno){
			this.name = name;
			this.cno = cno;
		}
		id('y',123);
		alert("姓名:"+this.name+",学号为:"+this.cno);

用new()创建构造函数：

       function id(name,cno){
				this.name = name;
				this.cno = cno;
		}
		var id1 = new id('x',124);
		alert("姓名:"+id1.name+",学号为:"+id1.cno);
		alert(id1.constructor.toString());//显示构造函数
		//即function id(name,cno){
		//		this.name = name;
		//		this.cno = cno;
		//}

prototype 原型属性：
在JavaScript中函数就是方法

function id(name,cno){
				this.name = name;
				this.cno = cno;
			}
			id.prototype.st =function(){//共享方法
				alert(id1.constructor.toString());
			}
			id.prototype.sex="男"//共享属性
			var id1 = new id('1',2);
			alert("姓名:"+id1.name+",学号为:"+id1.cno+"性别为:"+id1.sex);
			id1.st();

作业

九九乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>99乘法表</title>
		<style type="text/css">
			*{
				margin: 0 auto;
			}
			#header{
				width: 1200px;
				height: 50px;
				font-size: 2em;
				background-color: burlywood;
				text-align: center;
			}
			#neme{
				display: inline-block;
				text-indent: 5em;
			}
			#container{
				
			}
			td {
				border: #9932CC 1px solid;
				background-color: darkorchid;
				display: inline-block;
				width: 55px;
				height: 25px;
				margin-left:40px;
				margin-top:10px
			}
			#d{
				width: 58px;
				height: 26px;
			}
			#d{
				display: none;
			}
			td:hover #d{
				display: inherit;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<p id="name">九九乘法表</p>
		</div>
			<script type="text/javascript">
				var i,j;
				document.write("<div id=container>");
				document.write("<table align='cneter'");
				for(i = 1; i <= 9; i++){
					var s = '';
					document.write("<tr>");
					for(j = 1; j <= i; j++){
						document.write("<td>");
						document.write("<div id='d'>"+j+"*"+i+'='+i*j+"</div>");
					    document.write("</td>");
					}
					document.write("</tr>");
				}
				document.write("</table>");
				document.write("</div>");
			</script>
	</body>
</html>

用display：none让内容消失。

效果图：鼠标放上面会出现内容。
在这里插入图片描述

onclick的使用

单击鼠标左键触发
静态绑定：

<button type="button" onclick="alert('hello javascript')">欢迎</button>

动态绑定：调用函数

<button type="button" onclick="cal()">计算</button>
		<script type="text/javascript">
			var cal = function(){
				alert("1+2=3");
			}
			//cal();
		</script>

<button type="button">欢迎</button>
		<br />
		<button type="button" id = 'js'>计算</button>
		<script type="text/javascript">
			var hy = document.getElementById("js");
			hy.onclick = cal;
			function cal(){//不能使用变量的形式命名函数
				alert("1+2=3");
			}
			//cal();
		</script>

Y.IU.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

一些内置函数parseFloat(): 对字符串进行解析，并返回一个浮点数。该函数首先对字符串的首位进行判断，如果是数字则进行解析，直至最后一个数字，最后返回该子串组成的数字。一般用在输入当中。var t = parseFloat(prompt("input：")); document.write(t);//如果输入123 则输出123//如果输入12aasd123 则输出12//如果输入12.3 则输出12.3parseInt():和parseFloat()一样，只是不能解析小数点。
复制链接

扫一扫

专栏目录