javascript小练习
文章平均质量分 73
wz前端初学者
正走在学习前端的路上!!
展开
-
javascript基础练习-大图跟随鼠标移动展示
效果图如下: *{ margin: 0; padding: 0; } div{ text-align: center; } div img{ width: 200px; height: 200px; margin-right: 20px; cursor: pointer; } .bigBox{原创 2018-02-01 20:55:12 · 417 阅读 · 0 评论 -
javascript基础练习-拖拽练习
效果图如下(先拖拽,后回放): *{ margin: 0; padding: 0; } #box{ width: 100px; height:auto; background: rgba(255,165,0,0.6); position:absolute;原创 2018-02-01 21:10:33 · 291 阅读 · 0 评论 -
jquery基础练习-全选,全不选,反选
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="../jquery-3.3.1.min.js"&原创 2018-02-14 21:32:58 · 230 阅读 · 0 评论 -
jquery轮播图
效果图如下:HTML部分:<div class="main"> <div class="view"> <ul class="imageBox"> <li><img src="../images/0.jpg"></li> <l原创 2018-03-19 20:44:07 · 174 阅读 · 0 评论 -
vue基础练习
效果图如下:学习目前用到了v-bind,v-if,v-else,v-html插入子节点,v-for循环,v-model,v-on,filter过滤器,watch属性监测等知识<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdeliv...原创 2018-04-08 21:30:32 · 720 阅读 · 0 评论 -
js轮播图-面向对象版
效果图如下:HTML部分:<div id="main"> <ul class="imgBox"> <li><img src="../images/0.png"></li> <li><img src="../images/1.png"&原创 2018-03-27 22:38:58 · 356 阅读 · 0 评论 -
vue基础练习-组件,表单
主要用到了vue 表单和组件的知识,使用prop自定义属性将外部数据传到子组件内部中。练习截图:<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><原创 2018-04-10 20:43:06 · 528 阅读 · 0 评论 -
vue基础练习-自定义事件
效果图如下:这里左右两个按钮都是组件,每次点击时组件内部触发click事件,使count值加1,同时触发外部事件,使sum值加1<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....原创 2018-04-10 21:29:02 · 226 阅读 · 0 评论 -
js+css无缝滚动轮播图
通过js和css3的transition属性的过渡效果写了无缝轮播图css代码就不放了,有些乱效果图如下:html主体部分 > script代码:window.onload=function(){ var ULim原创 2018-01-16 21:55:02 · 930 阅读 · 0 评论 -
javascript简易留言板
效果图如下:原理很简单,就是在点击确定按钮后添加节点CSS代码:*{ margin: 0; padding: 0; } .title{ text-align: center; padding: 20px; height: auto; background: #E6E6FA; font-size: 20px; margin原创 2018-01-15 15:02:30 · 2841 阅读 · 2 评论 -
javascript基础练习-随机改变颜色
主要就是通过random方法改变RGB数值: .content{ width: 200px; height: auto; padding: 20px; margin:0 auto; color: white; background: black; } button{ display: block; width: 100px原创 2017-11-28 22:36:21 · 237 阅读 · 0 评论 -
javascript基础练习-选项卡切换
*{ margin: 0; padding: 0; font-size: 14px; } .main{ margin: 10px; } .main ul{ list-style-type: none; height: 2em; } .main ul li{ float: left; width: 5em; height:原创 2017-11-29 22:16:57 · 184 阅读 · 0 评论 -
javascript基础练习-获取和设置行内样式
效果图如下:代码部分如下: .box{ width: 300px; height: 100px; background: orange; margin: 0 auto; padding: 20px; color: white; transition: all 0.3s; } window.onload=fun原创 2017-12-09 15:30:22 · 300 阅读 · 0 评论 -
javascript基础练习-数字时钟
需要事先准备好0到9的数字图片,分别命名为0到9.png以下是效果图:代码部分: window.onload=function(){ var img=document.getElementsByClassName('num'); // 定义一个函数,当传入的参数小于10时,在参数前加上一个零 function toDou(num)原创 2017-12-10 21:01:15 · 348 阅读 · 0 评论 -
javascript基础练习-全选,反选,全不选
window.onload=function(){ var a=document.getElementsByTagName('input'); var btn=document.getElementsByTagName('button'); function all(){ for(var i=0;i<a.length;i++){ a[i].checked=tru原创 2017-12-03 00:16:56 · 267 阅读 · 0 评论 -
javascript基础练习-批量修改样式
代码部分: div{ width: 100%; height: 100px; background: black; margin: 10px auto; transition: all 0.3s; } /*改变之后的样式*/ .change{ width: 600px; background: orange; }原创 2017-11-26 16:27:11 · 409 阅读 · 0 评论 -
javascript基础练习-无缝滚动
效果图如下:主要是通过改变left值和定时器完成此效果代码部分如下: *{ margin: 0; padding: 0; } .box{ width: 500px; height: 100px; margin: 10px;原创 2017-12-16 21:33:11 · 190 阅读 · 0 评论 -
vue小练习
这一次小练习主要复习了vue组件,自定义事件和watch属性监听方面的知识。效果图如下:html部分代码:<div id="main"> <input type="text" name="" value="请输入编辑的内容" v-model="val"> <span class="Btn" class="原创 2018-05-03 21:51:49 · 244 阅读 · 0 评论