网页换肤：
<div>

<button>red</button>

<button>blue</button>

<button>black</button>

<div>

 <script>

     var btn=document.getElementsByTagName("button");

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

         btn[i].onclick=function(e){

         document.body.style.background=e.target.innerHTML;

         }

     }

 </script>
 
用循环改变元素背景：

<div id="s">

<button>red</button>

<button>blue</button>

<button>black</button>

<div>

<button id="kk">yellow</button>

<script>

var btn=document.getElementById("kk");

btn.onclick=function(e){

var  len=document.getElementById("s").getElementsByTagName("button");

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

   len[i].style.background=e.target.innerHTML;

         }

     }

 </script>
鼠标移入移出改变元素样式：
<div id="s">

<div>

<style>

#s{background: blueviolet;width: 200px;height: 100px;}

#s.d{background: red;width: 100px;height: 50px;}

}

</style>

     <script>

         var dd=document.getElementById("s");

         dd.onmouseover=function(){

        dd.classList.add("d");

         }

         dd.onmouseout=function(){

             dd.className=""; 

      }

     </script>

鼠标移入移出交替显示提示框
<input  id="ss"type="radio"/>

<div id="tips">don`t forget it </div>

<script>

    window.onload=function(){

    var ss=document.getElementById("ss");

    var tips=document.getElementById("tips");

    ss.onmouseover=function(){

        tips.style.display="block";

    }

    ss.onmouseout=function(){

        tips.style.display="none";

    }

    }

</script>

<style>

    #tips{

        background: yellow;width: 150px;height: 20px;text-align: center;display: none;

    }

</style>
交替显示样式（三元运算符）
<input  id="ss"type="radio"/>

<div id="tips">don`t forget it </div>

<script>

    window.onload=function(){

    var ss=document.getElementById("ss");

    var tips=document.getElementById("tips");

    ss.onclick=function(){

        tips.style.display=(tips.style.display=="block")?"none":"block";

;

    }

    }

</script>

<style>

    #tips{

        background: yellow;width: 150px;height: 20px;text-align: center;display: none;

    }

</style>
时钟（时分秒）
<script>

 setInterval(b,1000);

 function b(){

　　var date=new Date();

 　var a=[date.getHours(),date.getMinutes(),date.getSeconds()];

　　for(var i in  a ){

　　 document.getElementsByClassName("datee")[i].innerHTML=a[i];　

 }

 }

</script>

<span class="datee">

</span>:

<span class="datee">

</span>:

<span class="datee">

</span>
纯css下拉菜单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <ul id="nav">

             <li >Index

             <ul ><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

             </li>

             <li>About

                 <ul><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

              </li>

             <li>News

                 <ul><li>001</li>

                 <li>001</li>

                 <li>001</li>

             </ul>

              </li>

         </ul>

     <style>

         #nav,#nav ul{list-style: none;}

         #nav li{margin-right:1em;font-size:110%;text-align:center;background:darkkhaki;float: left;width: 10em;color: darkcyan;cursor: pointer;border: 1px solid rosybrown;}

         #nav ul{display: none;padding: 0 ;}

         #nav ul li{padding:0;background:darkgray;float: none;padding: 10px;border: 0 none transparent;padding: 0;}

         #nav li:hover ul{display: block;}

     </style>

    </body>

</html>

dhtml的更多相关文章

  1. DOM和DHTML等，复习总结

    DOM(Document Object Model),文件对象模型.HTML(HyperText Markup Language),超文本标记语言.HTML的超类:Node->Document: ...

  2. 提高 DHTML 页面性能

    联盟电脑摘要:本文说明了某些DHTML功能对性能的重大影响,并提供了一些提高DHTML页面性能的技巧. 目录 简介 成批处理DHTML更改 使用innerText 使用DOM添加单个元素 扩展SELE ...

  3. DHTML概述

    <!-- DHTML概述:动态的HTML.不是一门语言,是多项技术综合体的简称. 其中包含了HTML.CSS.DOM.JavaScript. 这四个技术在动态HTML页面效果定义时,都处于什么样 ...

  4. 链接，光标，DHTML，缩放

    18.1css中链接的使用超链接伪类属性:a:link 表示该链接文字尚未被点选a:visited 表示该链接文字已被点选过a:active 表示该链接文字正被点选,但未被放开a:hover 表示当鼠 ...

  5. HTML、XHTML XML和DHTML的区别

    XML与HTML的设计区别是:XML是用来存储数据的,重在数据本身.而HTML是用来定义数据的,重在数据的显示模式 XHTML(The Extensible HyperText Markup Lang ...

  6. [DHTML]什么是DHTML？

    DHTML 将 HTML.JavaScript.DOM 以及 CSS 组合在一起,用于创造动态性更强的网页. DHTML 总结 DHTML 只是一个术语,它描述了 HTML.JavaScript.DO ...

  7. Chrome内嵌 FlashPlayer（PPAPI）会被页面DHTML元素遮住的问题

    flash的wmode为window,Chrome版本为29.0.1547.66 m,Flash PPAPI为11.8.800.97,Flash NPAPI为11,8,800,94. flash在正常 ...

  8. ExtJs之DHTML,DOM,EXTJS的事件绑定区别

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  9. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

  10. DHTML 教程学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1.这个学习进度和前面几个学习进度,只是学习了 ...

随机推荐

  1. JAVA通过网站域名URL获取该网站的源码(2018

    import java.io.ByteArrayOutputStream;   import java.io.InputStream;   import java.net.HttpURLConnect ...

  2. debug启动项目很慢

    用debug启动项目比正常启动慢,从网上找到的是这样说的.删除所有的断点就可以了. 这个问题可能是由于eclipse和tomcat的交互而产生的,在以debug模式启动tomcat时,发生了读取文件错 ...

  3. CF F - Tree with Maximum Cost (树形DP)给出你一颗带点权的树，dist(i, j)的值为节点i到j的距离乘上节点j的权值，让你任意找一个节点v，使得dist(v, i) (1 < i < n)的和最大。输出最大的值。

    题目意思: 给出你一颗带点权的树,dist(i, j)的值为节点i到j的距离乘上节点j的权值,让你任意找一个节点v,使得dist(v, i) (1 < i < n)的和最大.输出最大的值. ...

  4. 108th LeetCode Weekly Contest Binary Subarrays With Sum

    In an array A of 0s and 1s, how many non-empty subarrays have sum S? Example 1: Input: A = [1,0,1,0, ...

  5. .Net支持Redis哨兵模式

    csredis 博客 csRedisgit地址 csRedis3.2.1 Nuget地址 (在使用csredis3.2.1获取sentinel时产生运行时异常,调查问题最后发现是获取sentinel的 ...

  6. Win10安装MySQL5.7.22解压缩版的方法及手动配置讲解

    1.先去MYSQL官网下载安装包,解压放到C盘 2.新建一个my.ini文件放到bin文件夹下面,内容如下,路径对应自己的安装目录: [mysql] # 设置mysql客户端默认字符集 default ...

  7. MariaDB 密码，新用户添加

    修改root密码1.以root身份在终端登陆(必须)2.输入 mysqladmin -u root -p password ex后面的 ex 是要设置的密码3.回车后出现 Enter password ...

  8. 【记录】dvwa总结

    一.Brute Force 选择集束炸弹 设置payload stack attck 防御:密码加密,使用验证码,使用统一的参数代替帐号和密码. 二.Command Injection |,||,&a ...

  9. 文献综述三：基于JSP的商品信息管理系统设计与开发

    一.基本信息 标题:基于JSP的商品信息管理系统设计与开发 时间:2015 出版源:Computer Knowledge and Technology 文件分类:jsp技术的系统开发 二.研究背景 通 ...

  10. Murano Weekly Meeting 2016.08.23

    Meeting time: 2016.August.23 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: ...