新人练手
bigmeow_lyj
这个作者很懒,什么都没留下…
展开
-
B站楼梯导航待更新(只使用HTML和CSS)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>B站楼梯导航</title> <style type="text/css"> body{ margin: 0;/*清除默认外边距*/ } ul{ ...原创 2019-04-10 15:08:26 · 519 阅读 · 1 评论 -
图片切换练习setInterval()、clearInterval()
w3school的解释:setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。实现图片切换:<!DOCTYPE html><ht...原创 2019-04-25 16:30:56 · 254 阅读 · 0 评论 -
html5插入video视频文件,为什么有声音不显示画面
插入video<video width="560px" height="340px" src="白宇、朱一龙 - 时间飞行~1.mp4" controls autoplay metud>非常抱歉,由于不可抗力因素,本视频无法播放</video>controls 控件播放autoplay 自动播放metud 静音我在火狐运行时,只能出现声音无法...原创 2019-04-30 10:13:09 · 9766 阅读 · 0 评论 -
JavaScript基础-添加删除记录练习
由<table> 标签来定义表格由 <tr> 标签定义行由 <td>标签定义字母每行被分割为若干单元格表格:<table id="employeetable"> <tr> <th>Name</th> <th>Email</th> <th>Sala...原创 2019-04-20 16:38:48 · 188 阅读 · 0 评论 -
js实现拖拽小练习
拖拽的流程当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown当鼠标移动时,被拖拽元素跟随移动 onmousemove当鼠标松开时,被拖拽元素被固定 onmouseup对div或者图片的拖拽<div id="box1"></div> <div id="box2"></div> <img src="img/狐狸.jpg...原创 2019-04-24 16:39:54 · 247 阅读 · 0 评论 -
div跟随鼠标移动练习
body里的代码<body style="height: 1000px;"> <div id="Div"></div> </body>CSS样式#Div{ width:50px ; height: 50px; background-color: greenyellow; position: absolute; ...原创 2019-04-23 15:54:55 · 538 阅读 · 0 评论 -
(js)事件对象练习
事件对象—当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数—在事件对象中封装了当前对象的一切信息(鼠标的位置,鼠标滚轮滚动方向)onmousemove—该事件会在鼠标移动时被触发<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&...原创 2019-04-23 10:48:57 · 493 阅读 · 1 评论 -
定时器的小知识点
开启一个定时器:var timer=setInterval(function(){},1000);关闭定时器:clearInterval(timer);定义一个变量,用来保存定时器的标识var timer;关闭之前开启的定时器,防止多次点击,持续开启定时器clearInterval(timer);获取样式:getComputedStyle()火狐中可以运行首先是有两个...原创 2019-04-26 16:20:08 · 226 阅读 · 0 评论 -
用正则表达式检验手机号码是否符合要求
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 手机号码的规则: * 第一位以1开头; * 第二位为3-9任...原创 2019-04-14 10:51:40 · 682 阅读 · 0 评论 -
js 图片切换练习
首先先在<body>里面放置一张图片,并设置两个按钮<div id="outer"> <img src="img/1.jpg" alt="奥利奥"/> <button id="prev">上一张</button> <button id="next">下一张</button> </div...原创 2019-04-16 11:02:54 · 239 阅读 · 0 评论 -
HTML5新增语义化标签练习
经典的页面布局中,页面被分为 header、main、aside、footer 四个部分传统都是用多个div盒子新增的部分语义化:<article>定义文章<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)<figcaption> 定义 figure 的标题<aside> 定义文章的侧边栏<footer>定...原创 2019-04-12 19:46:45 · 592 阅读 · 0 评论 -
js dom查询练习
代码:onload事件会在整个页面加载完成之后再触发如果将script标签写在head里,就要为window绑定一个onload事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>hello</title> <style type...原创 2019-04-15 19:55:33 · 450 阅读 · 0 评论 -
记一次CSS @keyframes动画旋转
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">{ margin:0 ; padding: 0; } .box{ width:50px ...原创 2019-04-09 11:25:45 · 1653 阅读 · 0 评论 -
一个简单的投票页面
用hbuilder写的一个投票页面,记录一下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>萌娃投票</title> <style type="text/css"><!--body,td,th { color: #...原创 2019-04-09 11:20:55 · 3066 阅读 · 0 评论 -
数组去重练习(splice)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>数组去重练习</title> <script type="text/javascript"> var arr=[1,2,3,2,2,1,3,4,2,5]; for ...原创 2019-04-11 14:27:59 · 312 阅读 · 0 评论 -
记一次被scroolTOP支配的经历
首先兼容性问题:var scrollTOP=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;当然最让我无语的是下面var scrollTOP=document.documentElement.scrollTop || window.pageYOffset || docum...原创 2019-05-11 17:34:08 · 139 阅读 · 0 评论