网页换肤：
<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. ASP.Net一般处理程序Session用法

    1.在aspx和aspx.cs中,都是以 Session["type"]="aaa" 和 string aaa=Session["type" ...

  2. C++11 中的 Defaulted 和 Deleted 函数

    http://blog.jobbole.com/103669/ C++11 中的 Defaulted 和 Deleted 函数 2016/07/21 · C/C++, 开发 · C++ 分享到:3   ...

  3. python---day14（ 内置函数二）

    内置函数二一:匿名函数 lambda函数 lambda 表示匿名函数,不需要用def 来申明. 语法: 函数名=lambda 参数:返回值 ----〉 案例:f=lambda n:n*n 例子01: ...

  4. 使用 v-model 实现 双向绑定.(子组件和父组件.)

    vue 自定义组件 v-model双向绑定. 父子组件同步通信   父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件 ...

  5. Joi图标

    刚开始浏览API的时候,旁边这个图片还真没明白是啥意思.现在才明白过来:),检测工具嘛,哈哈.

  6. 洛谷P1443 马的遍历（bfs，注意输出格式）

    题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输出 ...

  7. P2763 试题库问题

    传送门 显然的网络流,源点向所有题目连流量为1的边,表示一题只能用一次,题目向它的所有类型连边,流量设为1,类型向汇点连边流量为题目需要的该类型的数量 然后最大流 如果最大流小于总需要的类型题目数量则 ...

  8. Codeforces - 527C 平衡树维护几何

    题意:给定一个矩形\(W*H\),一共\(n\)次切割操作(水平/垂直),求每次操作后得出的最大面积 随机按tag扫CF题目找到的题,可以分别用平衡树维护割边的位置和长度(\(x/y\)各两个) 具体 ...

  9. UESTC - 1147 求最短路方案数

    这道题很是说明了记忆化搜索的重要性 瞎bfs递推半天发现没卵用(也许是姿势不对,但我认为树形或图形dfs明显好写并且很好正确地递推) 参考了别人的写法,总感觉自己的实现能力太弱了 还有题目是1e9+9 ...

  10. Win10如何新建用户怎么添加新账户

    https://jingyan.baidu.com/article/25648fc162d5899190fd0069.html 很多朋友都是安装完Windows10系统后,直接使用超级管理员账号登录系 ...