![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webapi
我的哥哥呦
不断学习,热爱学习的前端菜
展开
-
键盘按下事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><script> //页面的任何的位置.按下键盘,获取按键的值 docum...原创 2019-08-06 16:32:26 · 4531 阅读 · 0 评论 -
鼠标移动跟随
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ ...原创 2019-08-05 16:35:01 · 1552 阅读 · 0 评论 -
offset
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } input{...原创 2019-08-05 16:32:25 · 145 阅读 · 0 评论 -
动画函数
//设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字...原创 2019-08-05 16:24:47 · 411 阅读 · 0 评论 -
移动元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } inpu...原创 2019-08-05 16:08:02 · 230 阅读 · 0 评论 -
div逐渐透明化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; bac...原创 2019-08-05 16:02:20 · 3782 阅读 · 0 评论 -
协议按钮禁止
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><textarea name="texta" id="" cols="30" rows=...原创 2019-08-05 15:39:25 · 158 阅读 · 0 评论 -
摇起来/随机
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> img { width: 200px; height: 200px; } ...原创 2019-08-05 14:32:31 · 99 阅读 · 0 评论 -
定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <script> //BOM中有两个定时器---计时器 </script></head>...原创 2019-08-04 16:47:37 · 174 阅读 · 0 评论 -
useragent
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <script> // 通过userAgent可以判断用户浏览器的类型 console.log(window.na...原创 2019-08-04 16:45:00 · 361 阅读 · 0 评论 -
变速动画函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div {...原创 2019-08-05 17:23:11 · 126 阅读 · 0 评论 -
无刷新评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><table id="tb" border="1"> <tbody id=...原创 2019-08-06 15:12:00 · 318 阅读 · 0 评论 -
tab切换效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #list li { list-style-type: none; width: 80...原创 2019-08-06 11:38:55 · 751 阅读 · 0 评论 -
表格隔行变色
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...原创 2019-08-06 11:32:40 · 803 阅读 · 0 评论 -
元素隐藏的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; bor...原创 2019-08-06 11:27:22 · 334 阅读 · 0 评论 -
滚动条
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { ...原创 2019-08-06 11:22:03 · 112 阅读 · 0 评论 -
注册弹出框
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center;...原创 2019-08-06 11:14:55 · 1965 阅读 · 0 评论 -
数组中的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <script> var arr=[10,20,30,40,50]; //把第一个元素的值删除,追加到数组的最后 ...原创 2019-08-05 17:46:14 · 163 阅读 · 0 评论 -
手风琴案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0...原创 2019-08-05 17:33:43 · 327 阅读 · 0 评论 -
location/history
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <script> //对象中的属性和方法 //location对象 //console.log(window...原创 2019-08-04 16:37:08 · 134 阅读 · 0 评论 -
模拟百度搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; ...原创 2019-08-04 16:36:10 · 518 阅读 · 0 评论 -
removeAttribute
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> <style> div{ width: 200px; height: 100px; ...原创 2019-08-03 16:44:09 · 1949 阅读 · 1 评论 -
getAttribute
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> <style> ul{ list-style-type: none; cursor: poi...原创 2019-08-03 16:42:47 · 8438 阅读 · 0 评论 -
验证文本框长度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title></head><body><input type="text" value="" id="txt"/&g...原创 2019-08-03 16:26:30 · 705 阅读 · 0 评论 -
获取元素的方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title></head><body><script src="common.js"></script...原创 2019-08-03 16:22:30 · 80 阅读 · 0 评论 -
高亮显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> <style> ul { list-style-type: none; cursor: po...原创 2019-08-03 16:03:30 · 239 阅读 · 0 评论 -
换行更换颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title></head><body><input type="button" value="隔行变色" id="b...原创 2019-08-03 15:54:37 · 303 阅读 · 0 评论 -
节点的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div> <p></p> &...原创 2019-08-03 16:48:56 · 287 阅读 · 0 评论 -
事件冒泡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> #dv1{ width: 300px; height: 200px; ba...原创 2019-08-04 14:38:47 · 165 阅读 · 0 评论 -
为元素绑定事件兼容代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><input type="button" value="按钮" id="btn"/>...原创 2019-08-04 10:58:37 · 74 阅读 · 0 评论 -
为元素绑定多个事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><input type="button" value="按钮" id="btn"/>...原创 2019-08-04 10:53:25 · 129 阅读 · 0 评论 -
元素相关方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200px; bor...原创 2019-08-04 10:15:37 · 92 阅读 · 0 评论 -
全选与不全选
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...原创 2019-08-03 17:34:47 · 115 阅读 · 0 评论 -
切换背景图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>哈哈,我又变帅了</title> <style> * { margin: 0px; padding: 0px; } ...原创 2019-08-03 17:32:31 · 422 阅读 · 0 评论 -
相册案例
<!--显示大图的--><img id="image" src="images/placeholder.png" alt="" width="450"/><p id="des">选择一个图片</p><script src="common.js"></script><script> //点击a标签,把...原创 2019-08-03 15:46:24 · 240 阅读 · 0 评论