js实验1.入门使用和计时器

最新推荐文章于 2022-12-08 20:00:00 发布

清楼小刘

最新推荐文章于 2022-12-08 20:00:00 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_33826977/article/details/70193885

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、(triangle.html)用for语句和document.write(str)画一个倒三角形。

js代码如下：

<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<title>Triangle</title>

</head>
<body>
  <h1>Triangle</h1>
  <script>
	for(var i = 10 ; i > 0 ; i--)
	{
		for(var j = i ; j > 0 ;j --)
		{
			document.write('*');
		}
		document.write("<br>");
	}
</script>
</body>
</html>

2、(calc.html)前台计算器，输入十进制整数或小数，点击计算按钮后得到计算结果。

document.getElementById(str)得到id为str的对象

obj.innerHTML=str（注意和outerHTML区分开来）

parseFloat(str)转化成浮点类型

完整代码如下：

<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<title>计算器</title>
<style>
  input {width:5em}
</style>
</head>
<body>
  <h1>计算器</h1>
  <p><input type="text" id="num1"> +  <input type="text" id="num2"> =  <span id="result">?</span></p>
  <input type="button"  value="计算" οnclick="calc()">
  <script>
     function calc(){
		var x = document.getElementById("num1").value;
		var y = document.getElementById("num2").value;
		var result = parseFloat(x)+parseFloat(y);
		document.getElementById("result").innerHTML = result;
     }
  </script>
</body>
</html>

3.设计两个数字计时器(timer1.html， timer2.html)。

（1）简单计时器：按启动键开始一直计时。

提示：setTimeout(timer, 1000); //ms

<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<title>计时器1</title>
  <style> 
     span {text-decoration:underline;}
     span:hover {cursor:pointer}
  </style>
  <script>
     var start = true;
	 var i = 0;
	 function hello() 
	 {
		
		if(start) 
		{
			start = true;
			i = i + 0.01;
			var ctrl = document.getElementById("timer");
			ctrl.innerHTML = i.toFixed(2);//保留小数点后2位小数
			document.getElementById("start").innerHTML = "暂停";
			
		}
		else
		{
			start = false;
			document.getElementById("start").innerHTML = "启动";
		}
		window.setTimeout(hello, 10);//10ms执行一次
	}
  </script>
</head>
<body>
  <h1>计时器1</h1>
  <div>
  <span id="start" οnclick="hello()">启动</span>
   <span id="reset" >复位</span>
  </div>
  
  <div id="timer">0.00</div>
</body>
</html>

（2） 复杂计时器：按启动开始计时，“启动变”为“暂停”，再按继续启动。再暂停时按复位按钮将回到初始状态。

<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
  <title>计时器2</title>
  <style> 
     span {text-decoration:underline;}
     span:hover {cursor:pointer}
  </style>
  <script type="text/javascript">
     var t = 0.00;
     var start = false;
	 
    function toggleTimer(){
        if(!start){
            start = true;
            document.getElementById("start").innerHTML = "暂停";
            timedCount(start);
        }else {
            start = false;
            document.getElementById("start").innerHTML = "启动";
            timedCount(start);
        }
    }

    function timedCount(start){
        if(start)
		{
            t = t + 0.01; 
			document.getElementById('timer').innerHTML = t.toFixed(2);
            t1 = setTimeout("timedCount(start)",10); //如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
        }
		else 
		{
            setTimeout("document.getElementById('timer').value=t",0);
            clearTimeout(t1);
        }
    }

    function resetTimer()
	{
        t = 0.00;
        document.getElementById("timer").innerHTML = "0.00";
	}
  </script>
 </head>
 <body>
   <h1>计时器2</h1>
   <div><span id="start" οnclick="toggleTimer()">启动</span>  <span οnclick="resetTimer()">复位</span></div>
   <div id="timer">0.00</div>
 </body>
</html>

4.(validate.html)验证密码，输入两个密码，如果不相同，则弹出出错信息，否则，提交到 OK.jsp (没有该文件时会出错 ) 。

<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
  <title>验证正确性</title>
  <script type="text/javascript">
	function submit1()
	{
		var pass1 = document.getElementById("pass1");
		var pass2 = document.getElementById("pass2");
		if (pass1.value != pass2.value){
			alert("两次输入的密码不相等");
			return false;
		}
		document.forms["frm"].submit(); // 用document.frm.submit()也可以
		return false;//返回false取消默认行为（ submit）
	}
  </script>
</head>
<body>
  <h1 style="text-align:center">验证正确性</h1>
  <form action="OK.jsp" method="post" name="frm">
       <p style="text-align:center">   密码：<input type="password" id="pass1"></p>
       <p style="text-align:center">重输入密码：<input type="password" id="pass2"></p>
       <p style="text-align:center"><input type="submit" value="提交" id="submit"></p>
   </form>
	<script type="text/javascript">
		var submit = document.getElementById("submit");
		submit.addEventListener("click",submit1);
	</script>
</body>
</html>

清楼小刘

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实验1.入门使用和计时器

1、(triangle.html)用for语句和document.write(str)画一个倒三角形。js代码如下：Triangle Triangle for(var i = 10 ; i > 0 ; i--) { for(var j = i ; j > 0 ;j --) { document.write('*'); } document.w
复制链接

扫一扫

专栏目录