AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Web4个实验题目DOM+JS

2017-10-18 1050
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实验目的： 1. 掌握DOM对象的基本语法 2. 掌握getElementById函数 3. 掌握getElementsByTagName函数 来源http://www.cnblogs.com/xiaobo-Linux/p/7687658.html 实验内容： 1、在页面中显示当前时间的年月日小时分钟秒，并实现时间的变化。

实验目的：

1. 掌握DOM对象的基本语法

2. 掌握getElementById函数

3. 掌握getElementsByTagName函数

来源http://www.cnblogs.com/xiaobo-Linux/p/7687658.html

实验内容：

1、在页面中显示当前时间的年月日小时分钟秒，并实现时间的变化。

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

    </head>

    <style>

       #mytime{

           font-size: 90px;

           color: red;

       }

    </style>

    <body>

       <div id="mytime"></div>

       <script>

           function test(){

              var d = new Date();

              var year = d.getFullYear();

              var month = d.getMonth()+1;

              var date = d.getDate();

              var hours = d.getHours();

              if(hours<10){

                  hours= '0'+hours;//小于10显示不错位 一直显示两位

            }

              var miniutes = d.getMinutes();

              if(miniutes<10){

                  miniutes= '0'+miniutes;//小于10显示不错位 一直显示两位

            }

              var seconds = d.getSeconds();

              if(seconds<10){

                  seconds= '0'+seconds;//小于10显示不错位 一直显示两位

            }

              var str = year+"年"+month+"月"+date+"日"+ hours+"时"+miniutes+"分"+seconds+"秒";

              document.getElementById("mytime").innerHTML=str;

              setTimeout('test()',1000);//定时器函数 1000ms

         }

           //document.getElementById("mytime").innerHTML=100;

           document.body.onload = function(){//事件的注册

              test();

           }

       </script>

    </body>

</html>

 

 

2、使用<marquee>标记实现图片滚动效果，当鼠标滑过图片时，图片停止滚动，当鼠标从图片上移出时，图片继续滚动。

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

    </head>

    <body>

       <marquee behavior="alternate"onmouseout=this.start() onmouseover="this.stop() "> <img src="img/pic.jpeg" </marquee>

    </body>

</html>

 

3、在页面中创建一个n行（n大于等于3）1列的表格，实现鼠标滑过表格中的某行时，该行的背景颜色变为黄色，当鼠标移出该行时，该行的背景颜色恢复为原来状态。

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8" />

       <title></title>

    </head>

    <body>

    <script>

      document.write("<table class='border' border='1' width='30px' id='mytable'> ");

      for(var row=1;row<=9;row++){

            document.write("<tr class='mytr'>");

        for(var col=1;col<=1;col++){

            document.write("<td>"); 

   

            document.write(row+"*"+col+"="+row*col);

            document.write("</td>");

        }

      }

            document.write("</tr>");

            document.write("</table>");

         

    </script>

    <script>

    //   document.getElementById()

    //操作表格

    document.querySelector("#mytable");

    var trs= mytable.querySelectorAll("tr");

    for (var i=0;i<trs.length;i++) {

       /* if(i%2==1)

       trs[i].style.backgroundColor = "yellow";

       else

       trs[i].style.backgroundColor = "white"; */

       trs[i].onmouseover=function(){

           this.style.backgroundColor = "yellow";

       }

       trs[i].onmouseout=function(){

           this.style.backgroundColor = "white"

       }

      

    }

    </script>

    </body>

</html>

 

4、在页面中添加两个文本框，当文本框得到焦点时，文本框的背景颜色变为红色，当文本框失去焦点时，文本框的背景颜色恢复为原来状态。

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

    </head>

    <body>

       <form id="myform">

           <input type="text" id="t1"/>

           <input type="text" id="t2" />

       </form>

       <script>

           var mytext1 = document.querySelector("#t1");

           mytext1.onfocus=function(){

              this.style.backgroundColor= "red";

           }

           mytext1.onfocusout=function(){

              this.style.backgroundColor="white";

           }

           var mytext2 = document.querySelector("#t2");

           mytext2.onfocus=function(){

              this.style.backgroundColor= "red";

           }

           mytext2.onfocusout=function(){

              this.style.backgroundColor="white";

           }

       </script>

    </body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 
文章标签：
JavaScript
关键词：
web js
JavaScript DOM
web题目
web dom
dom js
小波linux
目录
相关文章
光明顶阳顶天
|
9月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
260 57
游客z4tr7ctjfoahk
|
2月前
|
前端开发 算法 API
构建高性能图像处理Web应用：Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践，涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持，TailwindCSS加速UI开发，WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略，解决大图像处理性能瓶颈，并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能，进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
游客z4tr7ctjfoahk
139 9
游客lijmi4663rgsa
|
4月前
|
JavaScript 前端开发 API
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
array.map(）可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等，比for好用太多了，主要是写法简单，并且非常直观，并且能提升代码的可读性，也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
310 1
我是快乐的嘟嘟
|
8月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
我是快乐的嘟嘟
366 57
我是快乐的嘟嘟
|
8月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
我是快乐的嘟嘟
181 49
是乙太呀
|
7月前
|
安全 程序员 PHP
实验室信创平台上几道经典的web-php有关的题目wp
本内容介绍了多个CTF题目及其解题思路，涵盖正则表达式、PHP函数、代码审计等方面。例如，通过POST提交和正则匹配获取flag，利用PHP的松散比较和数组特性绕过验证，以及通过恢复VIM临时文件和SVN隐藏文件夹获取关键信息。每个题目都提供了详细的解题步骤和相关链接，适合初学者学习和实践。
是乙太呀
78 1
东方睿赢
|
8月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合；TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展，特别是在Vue 3.0中完全采用TypeScript编写，预示着未来的Web开发将更加高效、可靠。
东方睿赢
296 4
龙大吉
|
8月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
247 5
东方睿赢
|
8月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义，TypeScript 能够在编码阶段发现潜在错误，提高代码质量；支持组件的清晰定义与复用，增强代码的可维护性；与 React、Vue 等框架结合，提供更佳的开发体验；适用于大型项目，优化代码结构和性能。随着 Web 技术的发展，TypeScript 的应用前景广阔，将继续引领 Web 开发的新趋势。
东方睿赢
160 2
chnjames
|
9月前
|
XML JavaScript 前端开发
JavaScript控制台：提升Web开发技能的秘密武器
作为Web开发人员，掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法，从基本的log()到高级的profile()和memory，每种方法都配有示例和说明，帮助开发者更高效地调试和记录信息。通过了解这些工具，您可以优化代码、提高开发速度，减少错误，使编码过程更加顺畅愉快。
chnjames
104 1
JavaScript控制台：提升Web开发技能的秘密武器

热门文章

最新文章

  • 1
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
  • 2
    怀孕b超单子在线制作，p图一键生成怀孕，JS代码装逼娱乐
  • 3
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
  • 4
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
  • 5
    处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
  • 6
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
  • 7
    Node.js中发起HTTP请求的五种方式
  • 8
    抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
  • 9
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
  • 10
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
  • 1
    入门Vue+.NET 8 Web Api记录（一）
    415
  • 2
    Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
    121
  • 3
    WEB前端三大主流框架：React、Vue与Angular
    631
  • 4
    PHP 8新特性及其对现代Web开发的影响
    73
  • 5
    探索PHP 8的新特性及其对现代Web开发的影响
    69
  • 6
    PHP在现代Web开发中的角色与挑战
    57
  • 7
    GitHub爆赞的Web安全防护指南，网络安全零基础入门必备教程！
    118
  • 8
    国内可用的 Web Search API，可以平替Bing Search API
    2966
  • 9
    PHP在现代Web开发中的角色和挑战
    80
  • 10
    揭秘！JavaScript本地存储的四大绝技：从Cookie到IndexedDB，让你的Web应用秒变数据存储高手，轻松应对各种挑战！
    184

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • JavaScript 自学手册文档教程
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 云上Web及FTP
  • WEB网页编程实战
  • 通过部署流行Web框架掌握Serverless技术
    • 下一篇
    就是要你懂负载均衡--lvs和转发模式