学院JavaScript考试猜测

Z_JTF

已于 2023-12-20 08:40:51 修改

阅读量139

点赞数 6

文章标签： javascript

于 2023-12-19 16:04:37 首次发布

本文链接：https://blog.csdn.net/Z_JTF/article/details/135086608

版权

猜数字

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>猜数游戏</title>
   </head>
   <body>

动态钟

<html>
   <head>
       <meta charset="utf-8">
       <title>正在运行的时钟</title>
       <style type="text/css">
           /*设置样式：无边框的文本框*/
           input,
           #clock {
               width: 390;
               font-size: 30px;
               font-weight: 900;
               color: #FFFFFF;
               background-color: #930;
               border: 8px double #900;
           }
       </style>
   </head>
   <body onLoad="disptime( ) ">
       <form name="myform">
           <input name="myclock" type="text" value="" size="20">
       </form>
       <span id="clock"></span>

点亮灯泡

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>点亮灯泡</title>
   </head>
   <body>
   <img id="myimage" src="img/pic_bulboff.gif" οnclick="changeImage()" alt="my image gallery">
       <p>点击灯泡就可以打开或关闭这盏灯</p>
       <script>
           function changeImage() {
               element = document.getElementById('myimage')

               if (element.src.match("bulbon")) {
                   element.src = "img/pic_bulboff.gif";
               } else {
                   element.src = "img/pic_bulbon.gif";
               }
           }
       </script>
   </body>
</html>

图片放在img里，并命名好，和src中对应即可。

红绿灯变化

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>红绿灯</title>
   </head>
   <body>
       <style>
           span {
               display: inline-block;
               width: 80px;
               height: 80px;
               border-radius: 50%;
               border: 1px solid white;
               opacity: 0.1;
           }
           .light {
               opacity: 1;
           }
           #red {
                   background-color: red;
               }
           #yellow {
                   background-color: yellow;
               }
           #green {
                   background-color: green;
               }
           #time {
               margin-left: 30px;
               font-size: 70px;
           }
       </style>
       <div align="center">红绿灯</div>
       <p>
           <div align="center">
           <span id="red" class="light"></span>
           <span id="yellow"="light"></span>
           <span id="green"="light"></span>
           <b id="time">10</b>
           </div>
       </p>
       <script>
           var current = "red";
           var time =10;
           function changeLight(from,to,timeout){
               if(time>0){
                   return;
               }
               current=to;
               time=timeout;
               document.getElementById(from).removeAttribute("class","light");
               document.getElementById(to).setAttribute("class","light");
               }
               setInterval(function(){
                   time--;
                   if(current==="red"){
                       changeLight("red","yellow",3);
                   }else if(current==="yellow"){
                       changeLight("yellow","green",8);
                   }else if(current==="green"){
                       changeLight("green","red",10);
               }
               document.getElementById("time").innerText=time;
               },1000);
       </script>
   </body>
</html>

Ps：参考者切勿一致，适当修改，这出个人喜欢用居中放置，参考者可以删除该程序34和36行的align="center"即可。

第三方跳转

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>第三方跳转</title>
   </head>
   <body>
       <h1>第三方跳转</h1>
       <button id="tengxun">腾讯</button>
       <button id="youku">优酷</button>
       <button id="aiqiyi">爱奇艺</button>
       <button id="mangguoTV">芒果TV</button>
       <script>
           function bindLink(id,name,url){
               var ele=document.getElementById(id);
               if(ele){
                   ele.addEventListener("click",function(){
                       if(confirm("确认前往"+name+"？")){
                           open(url,"_blank");
                       }
                   });
               }
           }
           bindLink("tengxun","腾讯","https://v.qq.com/");
           bindLink("youku","优酷","https://www.youku.com");
           bindLink("aiqiyi","爱奇艺","https://www.iqiyi.com");
           bindLink("mangguoTV","芒果TV","https://www.mgtv.com/");
       </script>
   </body>
</html>

思政图片切换

创建index.html，编辑如下代码内容：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style>
       #image{
           display: block;
           width: 800px;
           height: 480px;
           margin: 10px auto;
       }
       #next{
           margin-left: 350px;
       }
   </style>
   <body>
       <img src="img/1.jpg" id="image" />
       <button id="next">next</button>
       <button id="prev">prev</button>
       <script>
           var image = document.getElementById('image');
           var next = document.getElementById("next");
           var prev = document.getElementById('prev');
           var nowIndex = 1;
           var count = 6;
           next.onclick = function(){
               //if(nowIndex+1>count){
               //   nowIndex = 1;
               //}else{
               //   nowIndex++;
               //}
               nowIndex = nowIndex+1>count?1:nowIndex+1;
               image.src = "img/"+nowIndex+".jpg";
           }
           prev.onclick = function(){
               nowIndex = nowIndex<=1?count:nowIndex-1;
//               if(nowIndex-1<=0){
//                   nowIndex = count;
//               }else{
//                   nowIndex--;
//               }
               image.src = "img/"+nowIndex+".jpg";
           }
       </script>
   </body>
</html>

在同目录中创建文件夹，重命名为img中，在里面存放好图片，并将图片重命名为“1.jpg”、““2.jpg””...

保存完毕后，即可完成。

filter回调函数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>filter回调函数</title>
   </head>
   <body>
       <script>
           var arr=[-2,-1,0,1,2,3];
           function fn(a)
           {
               if(a > 0)
               return true;
               else
               return false;
           }
           function filter(arr,fn)
           {
               var newarr = [];
               for(var i = 0; i < arr.length; i++)
               {
                   if(fn(arr[i])) newarr.push(arr[i]);
               }
               return newarr;
           }
           document.write(filter(arr,fn));
       </script>
   </body>
</html>

图片放大缩小

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>图片放大放小</title>
</head>
<body>
   <p>双击图片将其放大放小</p >
   < img src="img/timg1.jpg"width="200" height="150"/>
<script>
   var $img = document.getElementsByTagName('img')[0];
   $img.ondblclick = function(){
   var expend = $img.getAttribute('expend');
   if (expend){
   $img.width = 200;
   $img.height = 150;
   $img.removeAttribute('expend');}
   else{
   $img.width = 800;
   $img.height = 600;
   $img.setAttribute('expend',1);
   }
   }
</script>
</body>
</html>