- 博客(23)
- 收藏
- 关注
原创 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 239
原创 webpack的使用体会
1.在使用webpack打包时,一直显示Cannot find module "webpack"的错误,去网上查阅试过很多方法,包括项目局部安装webpack和配置系统环境变量等等,问题一直没有解决,后来自己全局安装webpack-cli后才顺利解决,也就是输入cnpm/npm install webpack-cli -g语句,遇到相同问题可以试试.。2.需要注意webpack4的打包命令与之前...
2018-04-22 22:19:18 133
原创 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 223
原创 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 526
原创 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 716
原创 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 353
原创 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 172
原创 原生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 285
原创 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
原创 juqery addClass方法失效问题
使用jquery的addClass方法后,样式已经成功添加,但还是没有效果,是因为新添加的样式的优先级比起原先的样式低所致。例如,原先样式如下.test div{ width: 100px; height: 100px; background: black; }改变的样式如下:.change{ background: white; }像这种原先样式带有父级的,对.t...
2018-02-09 23:00:29 9114
原创 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 327
原创 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 290
原创 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 416
原创 js+css无缝滚动轮播图
通过js和css3的transition属性的过渡效果写了无缝轮播图css代码就不放了,有些乱效果图如下:html主体部分 > script代码:window.onload=function(){ var ULim
2018-01-16 21:55:02 928
原创 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 2833 2
原创 javascript基础练习-无缝滚动
效果图如下:主要是通过改变left值和定时器完成此效果代码部分如下: *{ margin: 0; padding: 0; } .box{ width: 500px; height: 100px; margin: 10px;
2017-12-16 21:33:11 190
原创 javascript基础练习-数字时钟
需要事先准备好0到9的数字图片,分别命名为0到9.png以下是效果图:代码部分: window.onload=function(){ var img=document.getElementsByClassName('num'); // 定义一个函数,当传入的参数小于10时,在参数前加上一个零 function toDou(num)
2017-12-10 21:01:15 345
原创 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 297
原创 obj.style.width问题
在学习过程中发现obj.style.width怎么也获取不到容器的宽度,经了解才知道obj.style.width只能获取行内样式,非行内样式想要取得容器的宽度可以采用:1.obj.offsetWidth2.obj.clientWidth
2017-12-06 22:27:24 665
原创 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 263
原创 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 183
原创 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 236
原创 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 406
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人