![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript实验案例
在学习js基础知识中,对一些基础知识点的实验练习,会更好的体现知识点的使用方式。
__十七
这个作者很懒,什么都没留下…
展开
-
案例7 新浪下拉菜单
案例:当鼠标经过一个div时候,就显示下拉菜单,不经过就隐藏//当鼠标经过一个div时候,就显示下拉菜单,不经过就隐藏<div class="all"> <div class="nav"> 企业用户 </div> <div class="sec"> <li>1</li> <li原创 2021-12-10 17:40:27 · 177 阅读 · 0 评论 -
案例6 密码框格式提示错误信息
案例//密码框验证信息,当输入密码时,密码的标准不满足我们的要求,就要在后面显示提示的信息。//案例分析://首先判断的时间是表单是去焦点onblur//如果输入正确则提示正确的信息颜色为绿色小图标变化//如果输入不是6到16位,那就提示密码错误的字样<div class="register"> <input type="password"> <p class="message">请输入6-16位的密码</p&原创 2021-12-10 17:39:03 · 598 阅读 · 0 评论 -
案例5 显示隐藏文本框内容
案例//显示隐藏文本框内容//当鼠标点击文本框的时候,里面的默认文字隐藏,当鼠标离开文本框的时候,里面的文字显示。//案例分析://首先表单需要两个新的时间,获得焦点**onfocus**和失去焦点**onblur**<input type="text" value="手机"> <script> // 1,获取元素 var text=document.querySelector('input'); /原创 2021-12-10 17:37:27 · 978 阅读 · 0 评论 -
案例 4 循环精灵图填充图片
案例//循环精灵图填充图片//分析://首先精灵图图偏排列是有规律的。对于竖着排列的 //利用for循环,修改精灵图片的背景位置background-position//剩下的就是数学功底了//style:.box li{ float: left; width: 24px; height: 24px; margin: 15px; list-style-type: none;原创 2021-12-10 17:36:07 · 138 阅读 · 0 评论 -
案例3 淘宝点击关闭二维码
案例//对于淘宝的广告点击隐藏起来,当鼠标点击二维码关闭按钮的时候,就关闭了整个二维码。<div class="all"> <div class="off">*</div> <div class="erweima"> <span>淘宝二维码</span> <img src="images/tao.png" alt="">原创 2021-12-10 17:34:18 · 639 阅读 · 0 评论 -
案例2 仿照京东密码框
案例 <!-- 仿照京东密码框 --> <div class="box"> <input type="password"> <img src="images/close.png" alt="" style="width: 20px;height: 20px;"> </div> <script> var input=document.query原创 2021-12-10 17:32:41 · 110 阅读 · 0 评论 -
案例1 分时显示不同图片,显示不同的问候语
案例:<!-- 案例 分时显示不同图片,显示不同问候语 --> <div>123</div> <img src="" alt=""> <script> var date=new Date(); var hours=date.getHours(); console.log(hours); var div=document.querySel原创 2021-12-10 17:30:45 · 571 阅读 · 0 评论