JS代码：变量作用域、消息框、数学对象、日期对象

最新推荐文章于 2024-01-11 17:38:22 发布

hahahafree

最新推荐文章于 2024-01-11 17:38:22 发布

阅读量88

点赞数

分类专栏： JavaScript Web 文章标签： JS

本文链接：https://blog.csdn.net/weixin_43731793/article/details/96428249

版权

Web 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

1、变量作用域:

1.全局变量
2.局部变量
#只有在函数内部带var的变量为局部变量，其余全为全局变量.

//全局变量
x=10;
function show(){
	x=100;
}
show();
alert(x);

//全局变量
function show(){
	x=10;
}
show();

alert(x);

//全局变量
var x=10;

function show(){
	alert(x);
}

show();

//局部变量

function show(){
	var x=10;
}

show();

alert(x);

2、消息框:

1.alert();
警告框

2.confirm();
确认框

3.prompt();
提示框

//警告框
x=10;
alert(x);

//确认框
confirm('您确认退出吗?');

confirm用法

<h1>网址大全:</h1>
	<h1>
		<a href="http://www.baidu.com" onclick="return confirm('您确认跳转吗?')">百度</a>
	</h1>
	<h1><a href="http://www.yzmedu.com">云知梦</a></h1>
	<h1><a href="http://www.163.com">网易</a></h1>

confirm用法

<h1>网址大全:</h1>
	<h1>
		<a href="http://www.baidu.com" id='aid'>百度</a>
	</h1>
	<h1><a href="http://www.yzmedu.com">云知梦</a></h1>
	<h1><a href="http://www.163.com">网易</a></h1>
</body>
<script>
aobj=document.getElementById('aid');

aobj.onclick=function(){
	return confirm('您确认跳转吗?');
}
</script>

prompt();

	<h1>网址大全:</h1>
	<h1>
		<a href="http://www.baidu.com" id='aid'>百度</a>
	</h1>
	<h1><a href="http://www.yzmedu.com">云知梦</a></h1>
	<h1><a href="http://www.163.com">网易</a></h1>
</body>
<script>
aobj=document.getElementById('aid');

aobj.onclick=function(){
	x=prompt('账号:');

	if(x!='admin'){
		alert('您不是管理员!');
		return false;
	}
}
</script>

3、数学对象:

属性:
Math.PI

方法:
Math.ceil(); #上一个整数
Math.floor(); #下一个整数
Math.round(); #四舍五入
Math.max(); #最大值
Math.min(); #最小值
Math.random(); #随机数实例

num=Math.PI;
alert(num);

	x=15.6
num=Math.ceil(x);
alert(num);

	x=15.6
num=Math.floor(x);
alert(num);

	a=10.2;
b=Math.round(a);
alert(b);

	x=(1,2,3,5);
num=Math.max(x);
alert(num);

	b=Math.min(1,5,3,2,100);
alert(b);

b=Math.random();
alert(b);

随机图片

	<body>
		<img src="/img/a.png" id="imgid">
</body>
<script>
imgs=['/img/a.png','/img/b.png','/img/c.png','/img/d.png','/img/e.png'];

r=Math.floor(Math.random()*imgs.length);

imgid=document.getElementById('imgid');

imgid.src=imgs[r];
</script>

4、日期对象:

创建:
dobj=new Date();

方法:
1.年
dobj.getFullYear();
2.月
month=dobj.getMonth()+1;
3.日
day=dobj.getDate();
4.时
hour=dobj.getHours();
5.分
minute=dobj.getMinutes();
6.秒
second=dobj.getSeconds();:
7.周
week=dobj.getDay();

显示时间

dobj=new Date();

year=dobj.getFullYear();
month=dobj.getMonth()+1;
day=dobj.getDate();

hour=dobj.getHours();
minute=dobj.getMinutes();
second=dobj.getSeconds();

tstr=year+'年'+month+'月'+day+'日'+' '+hour+'时'+minute+'分'+second+'秒';

alert(tstr);

显示周几

week=dobj.getDay();

秒表实例

<style>
		*{
			font-family: 微软雅黑;
		}
		.clock{
			width:300px;
			height:100px;
			background: #272822;
			border-radius:20px;
			position: absolute;
			top:50%;
			left:50%;
			margin-top:-50px;
			margin-left:-150px;
			color:#0f0;
			line-height: 100px;
			text-align: center;
			font-size:50px;
			font-weight: bold;
			cursor: pointer;
		}

		.clock:hover{
			color:#0ff;
		}

		
	</style>
	
</head>
<body>
		<div class="clock">
				<span id='sid'></span>
			</div>
</body>
<script>
sid=document.getElementById('sid');

function setTime(){
	dobj=new Date();
	hour=dobj.getHours();
	if(hour<10){
		hour='0'+hour;
	}

	minute=dobj.getMinutes();
	if(minute<10){
		minute='0'+minute;
	}

	second=dobj.getSeconds();
	if(second<10){
		second='0'+second;
	}
	timestr=hour+':'+minute+':'+second;
	sid.innerHTML=timestr;
}

setTime();

setInterval(function(){
	setTime();	
},1000);


</script>