- 博客(23)
- 收藏
- 关注
RSS订阅原创 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
227
原创 webpack的使用体会
1.在使用webpack打包时，一直显示Cannot find module "webpack"的错误，去网上查阅试过很多方法，包括项目局部安装webpack和配置系统环境变量等等，问题一直没有解决，后来自己全局安装webpack-cli后才顺利解决，也就是输入cnpm/npm install webpack-cli -g语句，遇到相同问题可以试试.。2.需要注意webpack4的打包命令与之前...
2018-04-22 22:19:18
125
原创 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
211
原创 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
507
原创 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
699
原创 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
346
原创 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
158
原创 原生js实现ajax方法
var Ajax={ get: function(url, fn) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.ready...
2018-02-18 21:18:01
270
原创 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
214
原创 juqery addClass方法失效问题
使用jquery的addClass方法后，样式已经成功添加，但还是没有效果，是因为新添加的样式的优先级比起原先的样式低所致。例如，原先样式如下.test div{ width: 100px; height: 100px; background: black; }改变的样式如下：.change{ background: white; }像这种原先样式带有父级的，对.t...
2018-02-09 23:00:29
9045
原创 jquery基础练习-选项卡切换
原理与js选项卡切换相同效果图如下：<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="../jquery-3.3.1.min.js"></script> &
2018-02-08 21:51:57
313
原创 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
278
原创 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
401
原创 js+css无缝滚动轮播图
通过js和css3的transition属性的过渡效果写了无缝轮播图css代码就不放了，有些乱效果图如下:html主体部分 > script代码:window.onload=function(){ var ULim
2018-01-16 21:55:02
906
原创 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
2798
2
原创 javascript基础练习-无缝滚动
效果图如下:主要是通过改变left值和定时器完成此效果代码部分如下: *{ margin: 0; padding: 0; } .box{ width: 500px; height: 100px; margin: 10px;
2017-12-16 21:33:11
176
原创 javascript基础练习-数字时钟
需要事先准备好0到9的数字图片，分别命名为0到9.png以下是效果图:代码部分: window.onload=function(){ var img=document.getElementsByClassName('num'); // 定义一个函数,当传入的参数小于10时,在参数前加上一个零 function toDou(num)
2017-12-10 21:01:15
329
原创 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
285
原创 obj.style.width问题
在学习过程中发现obj.style.width怎么也获取不到容器的宽度,经了解才知道obj.style.width只能获取行内样式,非行内样式想要取得容器的宽度可以采用：1.obj.offsetWidth2.obj.clientWidth
2017-12-06 22:27:24
653
原创 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
252
原创 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
172
原创 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
224
原创 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
392
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人