【JavaScript】练习二

最新推荐文章于 2024-07-17 20:16:35 发布

Alex_Madison

最新推荐文章于 2024-07-17 20:16:35 发布

阅读量116

点赞数 1

分类专栏：作业文章标签： javascript

本文链接：https://blog.csdn.net/Alex_Madison/article/details/125756458

版权

作业专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、页面中显示：当前的时间是 2022年7月11日 10:40:39 星期一
【页面中添加两个按钮，实现暂停启动】

<!DOCTYPE html>
<title>显示当前动态时间</title>
<meta charset="utf-8">
<script type="text/javascript">
function clock_12h(){
	var today = new Date();//获得当前时间
	today.setFullYear(2022,6,11);
	//获得年、月、日，Date()函数中的月份是从0-11计算
	var year = today.getFullYear();
	var month = today.getMonth()+1;
	var date = today.getDate();
	var hour = today.getHours();//获得小时、分钟、秒
	var minute = today.getMinutes();
	var second = today.getSeconds();
	var apm = "AM";//默认显示上午:AM
	if(hour>12)//按12小时制显示
	{
		hour = hour-12;
		apm="PM";
	}
	var weekday = 0;
	switch(today.getDay()){
	case 0:weekday = "星期日";break;
	case 1:weekday = "星期一";break;
	case 2:weekday = "星期二";break;
	case 3:weekday = "星期三";break;
	case 4:weekday = "星期四";break;
	case 5:weekday = "星期五";break;
	case 6:weekday = "星期六";break;

	}
	//weekday="星期"+"日一二三四五六".charAt(today.getDay());
	document.getElementById("myclock").innerHTML="<h5>你好，现在是北京时间:</h5><h5>"+year+"年"+month+"月"+date+"日&nbsp;"+hour+
	":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"</h5>";
	
}
var myTime = setInterval("clock_12h()",1000);
function goback(){
	history.go(-1);
}
</script>
</head>
<body>
<div id="myclock"></div>
</body>

2、实现距离今年国庆的倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倒计时</title>
	</head>
	<body>
		<div id="time">
			<p>离国庆节放假还有:</p>
			<span class="sp1">天</span>
			<span class="sp2">小时</span>
			<span class="sp3">分</span>
			<span class="sp4">秒</span>
		</div>
		<script type="text/javascript">
			var day = document.querySelector(".sp1");
			var hour = document.querySelector(".sp2");
			var minute = document.querySelector(".sp3");
			var second = document.querySelector(".sp4");
			var time = +new Date("2022-10-1 00:00:00");
			
			//调用函数,防止进入页面要过一秒才显示倒计时
			countDown();

			//启用定时器
			setInterval(countDown,1000);
			
			function countDown(){
				var now_time = new Date();
				var times = (now_time - time) /1000; //剩余秒数
				//转换
				var d = parseInt(times / 60 /60 / 24); //天
				var h = parseInt(times / 60 /60 % 24); //时
				var m = parseInt(times / 60 % 60); //分
				var s = parseInt(times % 60); //秒
				//写进网页
				day.innerHTML = d + "天";
				hour.innerHTML = h + "时";
				minute.innerHTML = m + "分";
				second.innerHTML = s + "秒";
			}
		</script>
	</body>
</html>

3、实现简易计算器，计算器页面美观，基本功能可以实现的【尝试】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
     *{
     	margin: 0;
     	padding: 0;
       }
       #calculater{
       	border: 6px solid;
       	margin: 0 auto;
       margin-top: 50px;
       border-spacing:0px;
       }
       #display{
       	width: 100%;
       	height: 30px;
       	border-bottom: 4px solid;
       	font-family: 黑体;
       	padding-left: 3px;
       	color: #193D83;
       	padding-left: 5px;
       }
       .numberkey{
       	cursor: pointer;
       	width: 40px;
       	height: 30px;
       	border: 1px solid #FFFFFF;
       	background: #2371D3;
       	color: black;
       	text-align: center;
       }
       #equality{
       	cursor: pointer;
       	width: 40px;
       	height: 100%;
       	background:#2371D3;
       	border: 1px solid;
       	text-align: center;

       }
       .numberkey:hover{
       	background: #EA6F30;
       }
       #equality:hover{
       	background: #EA6F30;
       }

	</style>
</head>

<body>
 <table id="calculater" onClick="calculater()">
        <tr>
            <td id="display" colspan="5" onClick="resultscalcaulte()">0</td>
        </tr>
        <tr>"
            <td class="numberkey" >1</td>
            <td class="numberkey" >2</td>
            <td class="numberkey" >3</td>
            <td class="numberkey" >+</td>
            <td class="numberkey"  id="deletesign">c</td>   
        </tr>
        <tr>
            <td class="numberkey" >4</td>
            <td class="numberkey" >5</td>
            <td class="numberkey" >6</td>
            <td class="numberkey" >-</td>
            <td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> 
        </tr>
        <tr>
            <td class="numberkey" >7</td>
            <td class="numberkey" >8</td>
            <td class="numberkey" >7</td>
            <td class="numberkey" >*</td>
        </tr>
        <tr >
            <td class="numberkey" >+/-</td>
            <td class="numberkey" >0</td>
            <td class="numberkey" >.</td>
            <td class="numberkey" >/</td>            
        </tr>
        <script type="text/javascript">
        var results="";
    var results2="";
    var calresults="";
    var lastkey="";
    var flg=1;
    var re1=/^[\*|\/].+/;
    var re2=/.+[\*|\/]$/;
    var re3=/(\+|-|\*|\/)/;
    var re4=/.+[\+|-|\*|\/]{1,99}.+/
    var re5=/\d.+/;
    function calculater () {
        if (event.srcElement.innerText=="=") {
            return;
        }
        if (event.srcElement.innerText=="c") {
            results="";
            display.innerText="0";
            return;
        }
        if (event.srcElement.id=="display") {
           return;
         }
        
        if (results.match(re1)) {
         display.innerText="输入错误";
         results="";
         return;
      }
        if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){
            return;
        }
        if(lastkey=="="&&event.srcElement.innerText.match(re3)){
           results=calresults;
        }
        
        if (event.srcElement.innerText=="+/-"&&results!="") {
            if (flg==-1) {
               results=String(results2);
               display.innerText=results;
               flg=-flg;
               return;
            }
               results2=results;
               results = "-"+"("+results+")";
               flg=-flg;
               display.innerText=results;
            return;  
        }
       
       results+=event.srcElement.innerText;
       lastkey=event.srcElement.innerText;
       display.innerText=results;
          }
    function resultscalcaulte(){
         if (results.match(re1)||results.match(re2)) {
         display.innerText="输入错误";
         results="";
         return;
      }
      
      calresults=eval(results);
      display.innerText=calresults;
      lastkey="=";
      results="";
    }

        </script>
     
</body>
</html>