Javascript实例

最新推荐文章于 2024-06-11 11:45:11 发布

小白爱吃菜

最新推荐文章于 2024-06-11 11:45:11 发布

阅读量1.3k

点赞数 1

分类专栏： HTML+CSS+Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/index0000001/article/details/125453874

版权

HTML+CSS+Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript 实例

1.基础实例

1.注释与HTML一样

单行注释：//

多行注释：/* */

<body>
	<p id="demo">the first</p>
	<script >
	document.write(Date());
	document.getElementById("demo").innerHTML="修改段落文字";
	</script>
</body>

2.随机访问

<body>
	<p id="demo1">the first</p>
	<script >	
	//创建0-1随机数
	var r=Math.random();	
	//获得元素id
	var	x=document.getElementById("demo1")
	//if---else 运用
	if (r>0.5) {
		x.innerHTML = "<a href='http://www.baidu.com'>访问百度</a>";s
	} else{
		x.innerHTML = "<a href='http://wwf.org'>Visit WWF</a>";	
	}
	</script>
</body>

3.显示今天星期几

<body>
	<!-- 创建动作按钮 -->
	<button onclick="gd()">点击按钮显示今天星期几</button>
	<p id="demo"></p>
	<script >	
	//创建函数gd来显示星期几
	function gd(){
		//x存放变量
		var x;
		//获得今天的数字0-6
		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>
</body>

4.弹窗确认框

<body>
	<!-- 创建动作按钮 -->
	<button onclick="tc()">点击按钮显示弹窗</button>
	<p id="demo">弹窗内容</p>
	<script >	
	function tc(){
		var x;
		var r=confirm("按确认或取消");
		if (r==true) {
			x="你按了确认"
		} else{
			x="你按了取消"
		}
		document.getElementById("demo").innerHTML=x;
	}
	</script>
</body>

5.弹窗输入框

<body>
	<!-- 创建动作按钮 -->
	<button onclick="dh()">点击按钮显示弹窗</button>
	<p id="demo"></p>
	<script >	
	function dh(){
		var x;
		//prompt()用于弹窗输入框 第一个值为提示内容，第二个值为输入框默认值
		var person=prompt("请输入你的名字","小高高");
		x="你好"+person+"!今天感觉如何？";
		document.getElementById("demo").innerHTML = x;
	}
	</script>
</body>

6.点击按钮延迟显示弹窗

<body>
	<!-- 创建动作按钮 -->
	<button onclick="xs()">点击按钮显示弹窗</button>
	<p id="demo"></p>
	<script >	
	function xs(){
		var x;
		//设置时间来做函数
		setTimeout(function(){alert("hello")},3000)
	}
	</script>
</body>

7.简单计时

<body>
	<!-- 创建动作按钮 -->
	<button onclick="js()">简单计时</button>
	<!-- 用来输出文本value -->
	<input type="text" id="demo">
	<script >	
	function js(){
	var x=document.getElementById("demo");
	var t1=setTimeout(function(){x.value="2秒"},2000);
	var t2=setTimeout(function(){x.value="4秒"},4000);
	var t3=setTimeout(function(){x.value="6秒"},6000);
	}
	</script>
</body>

8.无穷自动计时

<body>
	<!-- 创建动作按钮 -->
	<button onclick="dotime()">简单计时</button>
	<!-- 用来输出文本value -->
	<input type="text" id="demo">
	<script >
	// 创建变量
	var c=0;
	var	t;
	// 设置time的开关
	var timer_is_on=0;
	function timecount()
	{
		// 把c的值赋给输入框
		document.getElementById("demo").value=c;
		//每次变换加多少eg：2
		c=c+2;
		//每过几秒变换一次 eg：1
		t=setTimeout("timecount()",1000);
	}
	// 这个函数的作用是自动循环
	function dotime(){
		if (!timer_is_on)
		{
			timecount();
		}
	}
	</script>
</body>

9.计时时间制作钟表

<body onload="st()">
	<p id="demo"></p>
	<script >
	//获得时间
	function st(){
		var today=new Date();
		var h=today.getHours();
		var m=today.getMinutes();
		var s=today.getSeconds();
	// 检查时间数字是否小于10，小于10补0
		h=ct(h)
		m=ct(m)
		s=ct(s)
	//输出时间
		document.getElementById('demo').innerHTML=h+":"+m+":"+s;
	// 设置时间几秒变换一次
		t=setTimeout(function(){st()},500);
	}
	//检查是时间，返回新值
	function ct(i){
		if (i<10) {
			i="0"+i;
		}
		return i;
	}
	</script>
</body>