首页 web前端 js教程 分享一篇关于JS的实例代码

分享一篇关于JS的实例代码

Jun 26, 2017 pm 03:16 PM
javascript 代码 作业 学习





无标题文档

<script><br>window.onload=function(){<br>    var td1=document.getElementById("td");<br>    var dv0=document.getElementById("dva");<br>    var dv1=document.getElementById("dvv");<br>    var dv2=document.getElementById("dve");<br>    var color1=document.getElementById("c1");<br>    var color2=document.getElementById("c2");<br>    var color3=document.getElementById("c3");<br>    var width1=document.getElementById("w1");<br>    var width2=document.getElementById("w2");<br>    var width3=document.getElementById("w3");<br>    var height1=document.getElementById("h1");<br>    var height2=document.getElementById("h2");<br>    var height3=document.getElementById("h3");<br>    var re=document.getElementById("recover");<br>    var su=document.getElementById("sure");<br><br>    td1.onclick=function(){<br>        dv2.style.display='block';<br>        dv0.style.background='#999999';<br>        }<br><br>    color1.onclick=function(){<br>        dv1.style.background='#F00';<br>        }<br>    color1.onmouseover=function(){<br>        color1.style.background='#F00';<br>        }<br>    color1.onmouseout=function(){<br>        color1.style.background='#99CC66';<br>        }<br><br>    color2.onclick=function(){<br>        dv1.style.background='#FF0';<br>        }<br>    color2.onmouseover=function(){<br>        color2.style.background='#FF0';<br>        }<br>    color2.onmouseout=function(){<br>        color2.style.background='#CCCC00';<br>        }<br><br>    color3.onclick=function(){<br>        dv1.style.background='#00F';<br>        }<br>    color3.onmouseover=function(){<br>        color3.style.background='#00F';<br>        }<br>    color3.onmouseout=function(){<br>        color3.style.background='#3399CC';<br>        }<br><br>    width1.onclick=function(){<br>        dv1.style.width='200px';<br>        }<br>    width1.onmouseover=function(){<br>        width1.style.background='#F90';<br>        }<br>    width1.onmouseout=function(){<br>        width1.style.background='#CCC';<br>        }<br><br>    width2.onclick=function(){<br>        dv1.style.width='300px';<br>        }<br>    width2.onmouseover=function(){<br>        width2.style.background='#F90';<br>        }<br>    width2.onmouseout=function(){<br>        width2.style.background='#CCC';<br>        }<br><br>    width3.onclick=function(){<br>        dv1.style.width='400px';<br>        }<br>    width3.onmouseover=function(){<br>        width3.style.background='#F90';<br>        }<br>    width3.onmouseout=function(){<br>        width3.style.background='#CCC';<br>        }<br><br>    height1.onclick=function(){<br>        dv1.style.height='200px';<br>        }<br>    height1.onmouseover=function(){<br>        height1.style.background='#F90';<br>        }<br>    height1.onmouseout=function(){<br>        height1.style.background='#CCC';<br>        }<br><br>    height2.onclick=function(){<br>        dv1.style.height='300px';<br>        }<br>    height2.onmouseover=function(){<br>        height2.style.background='#F90';<br>        }<br>    height2.onmouseout=function(){<br>        height2.style.background='#CCC';<br>        }<br><br>    height3.onclick=function(){<br>        dv1.style.height='400px';<br>        }<br>    height3.onmouseover=function(){<br>        height3.style.background='#F90';<br>        }<br>    height3.onmouseout=function(){<br>        height3.style.background='#CCC';<br>        }<br><br>    re.onclick=function(){<br>        dv1.style.width='150px';<br>        dv1.style.height='150px';<br>        dv1.style.background='none';<br>        }<br><br>    su.onclick=function(){<br>        dv2.style.display='none';<br>        dv0.style.background='none';<br>        }<br>    }<br></script>



   
       
       
       
       
   

       请为下面的DIV设置样式:
       

       点击设置
       

   

   

   

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
请选择背景颜色:
请选择宽(px):200300400
请选择高(px):200300400

     
   
   
   
   
   
恢复确定

   



以上是分享一篇关于JS的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1662
14
CakePHP 教程
1418
52
Laravel 教程
1311
25
PHP教程
1261
29
C# 教程
1234
24
蓝屏代码0x0000001怎么办 蓝屏代码0x0000001怎么办 Feb 23, 2024 am 08:09 AM

蓝屏代码0x0000001怎么办蓝屏错误是电脑系统或硬件出现问题时的一种警告机制,代码0x0000001通常表示出现了硬件或驱动程序故障。当用户在使用电脑时突然遇到蓝屏错误,可能会感到惊慌和无措。幸运的是,大多数蓝屏错误都可以通过一些简单的步骤进行排除和处理。本文将为读者介绍一些解决蓝屏错误代码0x0000001的方法。首先,当遇到蓝屏错误时,我们可以尝试重

GE通用远程代码可在任何设备上编程 GE通用远程代码可在任何设备上编程 Mar 02, 2024 pm 01:58 PM

如果您需要远程编程任何设备,这篇文章会给您带来帮助。我们将分享编程任何设备的顶级GE通用远程代码。通用电气的遥控器是什么?GEUniversalRemote是一款遥控器,可用于控制多个设备,如智能电视、LG、Vizio、索尼、蓝光、DVD、DVR、Roku、AppleTV、流媒体播放器等。GEUniversal遥控器有各种型号,具有不同的功能和功能。GEUniversalRemote最多可以控制四台设备。顶级通用遥控器代码,可在任何设备上编程GE遥控器配备一组代码,使其能够与不同设备相配合。您可

如何使用Copilot生成代码 如何使用Copilot生成代码 Mar 23, 2024 am 10:41 AM

作为一名程序员,对于能够简化编码体验的工具,我感到非常兴奋。借助人工智能工具的帮助,我们可以生成演示代码,并根据需求进行必要的修改。在VisualStudioCode中新引入的Copilot工具让我们能够创建具有自然语言聊天交互的AI生成代码。通过解释功能,我们可以更好地理解现有代码的含义。如何使用Copilot生成代码?要开始,我们首先需要获得最新的PowerPlatformTools扩展。要实现这一点,你需要进入扩展页面,搜索“PowerPlatformTool”,然后点击Install按钮

Pygame入门指南:全面安装和配置教程 Pygame入门指南:全面安装和配置教程 Feb 19, 2024 pm 10:10 PM

从零开始学习Pygame:完整的安装和配置教程,需要具体代码示例引言:Pygame是一个使用Python编程语言开发的开源游戏开发库,它提供了丰富的功能和工具,使得开发者可以轻松创建各种类型的游戏。本文将带您从零开始学习Pygame,并提供完整的安装和配置教程,以及具体的代码示例,让您快速入门。第一部分:安装Python和Pygame首先,确保您的计算机上已

揭秘C语言的吸引力: 发掘程序员的潜质 揭秘C语言的吸引力: 发掘程序员的潜质 Feb 24, 2024 pm 11:21 PM

学习C语言的魅力:解锁程序员的潜力随着科技的不断发展,计算机编程已经成为了一个备受关注的领域。在众多编程语言中,C语言一直以来都备受程序员的喜爱。它的简单、高效以及广泛应用的特点,使得学习C语言成为了许多人进入编程领域的第一步。本文将讨论学习C语言的魅力,以及如何通过学习C语言来解锁程序员的潜力。首先,学习C语言的魅力在于其简洁性。相比其他编程语言而言,C语

一起学习word根号输入办法 一起学习word根号输入办法 Mar 19, 2024 pm 08:52 PM

在word中编辑文字内容时,有时会需要输入公式符号。有的小伙们不知道在word根号输入的方法,小面就让小编跟小伙伴们一起分享下word根号输入的方法教程。希望对小伙伴们有所帮助。首先,打开电脑上的Word软件,然后打开要编辑的文件,并将光标移动到需要插入根号的位置,参考下方的图片示例。2.选择【插入】,再选择符号里的【公式】。如下方的图片红色圈中部分内容所示:3.接着选择下方的【插入新公式】。如下方的图片红色圈中部分内容所示:4.选择【根式】,再选择合适的根号。如下方的图片红色圈中部分内容所示:

创建和运行Linux'.a”文件 创建和运行Linux'.a”文件 Mar 20, 2024 pm 04:46 PM

在Linux操作系统中处理文件需要使用各种命令和技术,使开发人员能够高效地创建和执行文件、代码、程序、脚本和其他东西。在Linux环境中,扩展名为”.a”的文件作为静态库具有重要的重要性。这些库在软件开发中发挥着重要作用,允许开发人员有效地管理和共享多个程序的公共功能。对于Linux环境中的有效软件开发,了解如何创建和运行“.a”文件至关重要。本文将介绍如何全面安装和配置Linux“.a”文件,让我们一起探索Linux“.a”文件的定义、用途、结构,以及创建和执行它的方法。什么是L

从零开始学习Go语言中的main函数 从零开始学习Go语言中的main函数 Mar 27, 2024 pm 05:03 PM

标题:从零开始学习Go语言中的main函数Go语言作为一种简洁、高效的编程语言,备受开发者青睐。在Go语言中,main函数是一个入口函数,每个Go程序都必须包含main函数作为程序的入口点。本文将从零开始介绍如何学习Go语言中的main函数,并提供具体的代码示例。一、首先,我们需要安装Go语言的开发环境。可以前往官方网站(https://golang.org

See all articles