数据自增
功能:当点击add按扭后,div标签中的数据自动+1,实现网页的动态化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="kong">孔扎根的博文</div> <ul> <li>第1篇</li> <li>第2篇</li> <li>第3篇</li> <li>第4篇</li> <li>第5篇</li> </ul> <div class="top"> 来条分隔线吧 <div>不要</div> <div>要</div> </div> <div class="top"> 去掉分隔线吧 </div> <div id="num">1</div> <input type="button" value="add1" onclick="add()"> <hr> 密码:<input type="text" value="123"> <script type="text/javascript"> function add(){ // 取到name=num的标签列表 names = document.getElementById(‘num‘); v_name = names.innerText; //反回的值是文本类型的 string console.log(typeof(names.innerText)); v_name = parseInt(v_name); v_name+=1; // 实现id=num的值自动加1的效果 names.innerText=v_name; } </script> </body> </html>
搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框</title> </head> <body> <!--定义一个文本框并设置默认值,绑定两个事件,分别为:获取焦点(onfocus)和失去焦点(onblur)--> <input type="text" id="serch" value="请输入关键字" onfocus="Focs()" onblur="Fblu()"> <script type="text/javascript"> // 获取焦点后,文本框内容为空 function Focs(){ var nid = document.getElementById(‘serch‘); var value = nid.value; if (value == ‘请输入关键字‘){ nid.value=‘‘ } } // 失去焦点后,文本框内容重现 function Fblu(){ var nid = document.getElementById(‘serch‘); var value = nid.value; if (value.trim() == ‘‘){ nid.value=‘请输入关键字‘ } } </script> </body> </html>
时间: 2024-09-29 04:20:19