JavaScript基础,来自“菜鸟教程”JavaScript实例练习【一】

“菜鸟教程”中的JavaScript实例练习,从前往后对应,编辑器用的HBuilderX,新建项目,在项目下新建.js文件,在里面加代码就可以运行啦~

<h1>first点击按钮,绑定事件,时间函数显示时间</h1>
		<button onclick="displayDate()">按钮</button>
		<script>
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
			}
		</script>
		<p id="demo"></p>
		
		<h1>second,利用id(js)改变HTML元素</h1>
		<p id="demo2">我的第二个小例子</p>
		<script>
			document.getElementById("demo2").innerHTML="第二个小例子已经修改!"
		</script>
		
		<h1>third,外部js文件</h1>
		<p id="demo3">一个段落</p>
		<button type="button" onclick="myfun3()">按钮3</button>
		<p><b>注释:</b>myfun3保存在web.js的外部文件中</p>
		<script src="web.js"></script>
		
		<h1>fourth定义一个变量,赋值,打印,再赋值,可继续打印出来</h1>
		<script>
			var firstname;
			firstname="Hege";
			document.write(firstname);
			document.write("<br>");
			firstname="Tove";
			document.write(firstname);
		</script>
		
		<h1>fifth,if语句</h1>
		<p>如果时间早于20:00,会获得问候“Good day”;基于时间的问候</p>
		<button onclick="myfun5()">点击这里</button>
		<p id="demo5"></p>
		<script>
			function myfun5(){
				var x="";
				var time=new Date().getHours();
				if(time<20){
					x="Good day!";
				}
				else{
					x="Good evening";
				}
				document.getElementById("demo5").innerHTML=x;
			}
		</script>
		
		<h1>sixth,random links</h1>
		<p>Math 对象用于执行数学任务,random 返回 0 ~ 1 之间的随机数,所有的HTML元素都是元素节点,href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL</p>
		<p>a标签定义超链接,用于从一个页面链接到另一个页面。元素最重要的属性是 href 属性,它指定链接的目标。</p>
		<p id="demo6"></p>
		<script>
			var r=Math.random();
			var x=document.getElementById("demo6");
			if(r>0.5){
				x.innerHTML="<a href='http://www.runoob.com'>访问菜鸟教程</a>";
			}
			else{
				x.innerHTML="<a href='https://www.baidu.com/'>访问百度</a>";
			}
		</script>
		
		<h1>seventh,switch语句</h1>
		<p>点击按钮显示今天周几</p>
		<button onclick="myfunc7()">按钮</button>
		<p id="demo7"></p>
		<script>
			function myfunc7(){
				var x;
				var d=new Date().getDay();
				switch(d){
					case 0:x="Sunday";
					break;
					case 1:x="Monday";
					break;
					case 2:x="Tuesday";
					break;
					case 3:x="Wednesday";
					break;
					case 4:x="Thursday";
					break;
					case 5:x="Friday";
					break;
					case 6:x="Saturday";
					break;
				}
				document.getElementById("demo7").innerHTML=x;
			}
		</script>
		
		<h1>eighth,alert、confirm、prompt</h1>
		<p>meta标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。</p>
		<p>\n是换行符</p>
		<script>
			function myFun8(){
				alert("你好!\n我是警告框!");
			}
		</script>
		<input type="button" onclick="myFun8()" value="显示警告框"/>	
		<p>确认框,点击确认或者取消</p>
		<button onclick="myfun9()">确认框</button>
		<p id="demo9"></p>
		<script>
			function myfun9(){
				var x;
				var c=confirm("这是一个确认框!");
				if(c==true){
					x="You clicked the 'confirm' button!"
				}else{
					x="You clicked the'cancel' button!"
				}
				document.getElementById("demo9").innerHTML=x;
			}
		</script>
		<p>提示框,点击按钮查看输入的对话框。prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串,语法是prompt(msg,defaultText)</p>
		<button onclick="myfunc10()">提示框</button>
		<p id="demo10"></p>
		<script>
			function myfunc10(){
				var x;
				var person=prompt("请输入你的名字","小明");
				if(person!=null && person!=""){
					x="Hello"+person+"!How are you?";
					document.getElementById("demo10").innerHTML=x;
				}
			}
		</script>

最近在看前端的东西,工作快一年来,还是有点迷茫,只能低头学东西了,没准学着学着就知道自己要干什么了,欢迎各位大佬给意见,跪谢~

后面还会更新一些…
源文件放到下一篇里

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值