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

Web4个实验题目DOM+JS

2017-10-18 1024
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实验目的： 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 dom
dom js
web实验
小波linux
目录
相关文章
光明顶阳顶天
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
22 1
chnjames
|
18天前
|
XML JavaScript 前端开发
JavaScript控制台：提升Web开发技能的秘密武器
作为Web开发人员，掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法，从基本的log()到高级的profile()和memory，每种方法都配有示例和说明，帮助开发者更高效地调试和记录信息。通过了解这些工具，您可以优化代码、提高开发速度，减少错误，使编码过程更加顺畅愉快。
chnjames
33 1
JavaScript控制台：提升Web开发技能的秘密武器
龙大吉
|
7天前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
14 4
何雨晨
|
26天前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
何雨晨
34 12
G0518
|
18天前
|
存储 JavaScript 前端开发
深入探索 Vue.js：构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js：构建现代 Web 应用的利器
G0518
13 1
有路有乔-六月
|
20天前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
有路有乔-六月
20 2
神明木佑
|
22天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
神明木佑
36 4
有路有乔-六月
|
20天前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
有路有乔-六月
13 1
代码bug生产队
|
20天前
|
JavaScript 前端开发 开发者
前端开发趋势：从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势：从Web Components到Vue.js
代码bug生产队
12 1
推石头的西西弗斯
|
25天前
|
Web App开发 前端开发 JavaScript
JavaScript Web Full Stack 全栈开发者路线及内容推荐
本文详细介绍了一条全面的JavaScript全栈开发者学习路径，涵盖基础知识、前端和后端开发、数据库与API、MERN Stack与React Native、工程化与部署、安全与测试、未来趋势等方面。推荐了HTML5、CSS3、JavaScript（ES6+）、Node.js、React.js、Vue.js、Svelte、Tailwind CSS、Web Components等关键技术，并提供了丰富的书籍、博主和在线资源。此外，还回顾了JavaScript的历史，并推荐了多个活跃的社区和平台，帮助开发者紧跟技术前沿。
推石头的西西弗斯
25 1

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    JavaScript 实时监听input中值变化
  • 3
    javascript模拟实现继承，继承一次父类模板和原型对象
  • 4
    Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中，为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。
  • 5
    Javascript之旅——第四站：parseInt中要注意的坑
  • 6
    JS语法作用域与词法作用域
  • 7
    纯JS控制textarea的maxLength
  • 8
    在JavaScript面向对象编程中使用继承(3)
  • 9
    Javascript设计模式之匿名函数与闭包
  • 10
    一看就会的Next.js App Router版 -- Routing（上）（一）
  • 1
    Web Worker：JavaScript的后台任务解决方案
    137
  • 2
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    46
  • 3
    http协议 报文 给你讲明白咯，web开发基础
    28
  • 4
    ES6 变量的解构赋值，中级web开发工程师
    36
  • 5
    使用WebAssembly提升Web应用性能
    83
  • 6
    Vue中的组件：构建现代Web应用的基石
    40
  • 7
    深入理解MVC和MVVM：构建现代Web应用的利器
    135
  • 8
    Web存储与传输：技术的背后
    71
  • 9
    揭秘Web缓存：提升网站性能与用户体验
    172
  • 10
    Android WindowFeature小探究，Android客户端Web页面通用性能优化实践
    45

    • 相关课程

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

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月