JavaScript的学习_dim firstname firstname="hege-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42009638/article/details/90291494

JavaScript基础

1.JS变量

//一个例子，声明一个变量，为他赋值
<script>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);
</script>
<p>上面的脚本定义了一个变量，给变量分配一个值并显示，再次修改变量的值后，再次显示。
</p>

2.JS条件语句 If … else

//一个例子，if语句
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	var time=new Date().getHours();
	if (time<20){
		x="Good day";
    }
	document.getElementById("demo").innerHTML=x;
}
</script>

3.JS条件语句-随机链接

//一个例子，随机链接
<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5){
	x.innerHTML="<a href='https://www.baidu.com/'>百度</a>";
}
else{
	x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

4.JS条件语句-Switch语句

//一个例子，Switch语句-星期几
<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		case 1:x="今天是星期一";
        break;
  		case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
        break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("demo").innerHTML=x;
}
</script>

5.JS消息框

//一个例子，提示框
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}
</script>

//确定框
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

6.JS函数

//一个例子，带有参数的函数
<script> 
function myfunction(txt) { 
	alert(txt);
} 
</script> 
</head> 
<body> 
	
<form> 
<input type="button" 
onclick="myfunction('Good Morning!')" 
value="在早上"> 
<input type="button" 
onclick="myfunction('Good Evening!')" 
value="在晚上"> 
</form> 
<p>
当你点击其中任意一个按钮，一个函数将被执行，函数结果弹出一个警告显示传递的参数。
</p>

7.JS循环

//一个例子，for循环
<p>单击按钮将代码块循环执行5次。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i;
	for (i=0;i<5;i++){
		x=x + "这个数字是" + i + "<br>";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

8.JS错误处理

//一个例子，try...catch语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var txt="";
function message(){
	try {
		adddlert("Welcome guest!");
	}
	catch(err) {
		txt="本页有一个错误。\n\n";
		txt+="错误描述：" + err.message + "\n\n";
		txt+="点击确定继续。\n\n";
		alert(txt);
	}
}
</script>
</head>
<body>

<input type="button" value="查看消息" onclick="message()" />

</body>
</html>


//带有确认框的try...catch语句
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
var txt="";
function message(){
	try{
		adddlert("Welcome guest!");
	}
	catch(err){
		txt="本页有一个错误。\n\n";
		txt+="单击确定继续跳转\n";	
		txt+="或者单击取消返回\n\n";
		if(confirm(txt)){
			document.location.href="//www.runoob.com/";
		}
	}
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>

9.JS计时器

//一个计时器例子
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
	if (!timer_is_on){
		timer_is_on=1;
		timedCount();
	}
}
function stopCount(){
	clearTimeout(t);
	timer_is_on=0;
}
</script>
</head>
<body>
	
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。
</p>
</body>
	
</html>

10.JS计时事件制作钟表

//一个例子，钟表
<script>
function startTime(){
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();// 在小于10的数字前加一个‘0’
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
}
</script>
</head>
<body onload="startTime()">
	
<div id="txt"></div>