部分项目总结

Mannero

于 2019-08-26 20:47:25 发布

阅读量349

点赞数 1

分类专栏：项目技巧前端总结文章标签：前端项目技巧

本文链接：https://blog.csdn.net/weixin_45100039/article/details/100085598

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

项目技巧

5 篇文章 0 订阅

订阅专栏

总结

4 篇文章 0 订阅

订阅专栏

网页嵌套(iframe)

 <!-- a标签的target属性,指向iframe标签的name属性 -->
    <a target="my_iframe" href="./1.html">1页面</a>
    <a target="my_iframe" href="./2.html">2页面</a>
    <a target="my_iframe" href="./3.html">3页面</a>
 <!-- 设置iframe标签的name属性 -->
	 <iframe name="my_iframe" src="./3.html" frameborder="0"></iframe>

设置图片按钮

<input type="file" id="btn1" style="display: none">
<label for="btn1">
        <img src="./images/按钮.jpg" style="width:100px" alt="">
</label>

富文本框内容设置

//1、如果当前页面只有一个编辑器： 
tinyMCE.activeEditor.getContent()       				//获取内容
tinyMCE.activeEditor.setContent('需要设置的编辑器内容')     //设置内容

//2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）： 
tinyMCE.editors[0].getContent()    				    //获取内容
tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)  //设置内容

//3、获取不带HTML标记的纯文本内容： 
var activeEditor = tinymce.activeEditor; 
var editBody = activeEditor.getBody(); 
activeEditor.selection.select(editBody); 
var text = activeEditor.selection.getContent( { 'format' : 'text' } );

外部图片拖入浏览器的count元素中将作为背景图片展示:

var count = document.querySelector('.count');
document.body.ondragover = function (e) {
            e = e || window.event;
            e.preventDefault();
}
document.body.ondrop = function (e) {
            e.preventDefault();
            var url = URL.createObjectURL(e.dataTransfer.files[0]);
            count.style.background = 'url(' + url +')';
            count.style.backgroundSize = 'cover';
}

上传图片并在img中展示

<body>
    <img src="" class="preview" alt="">						//展示图片的
	<input type="file" id="heroIcon"/>                      //上传文件按钮
</body>
<script>
	$('#heroIcon').change(function(){						
    	var url = URL.createObjectURL(this.files[0]);       //获取文件的临时路径
    	$('.preview').attr('src',url); 
	})
<script>

获取时间

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

获取地理位置–经度纬度

window.navigator.geolocation.getCurrentPosition( function(loc){
	// loc这个形参里就保存了经纬度
    // 纬度
       console.log(loc.coords.latitude);
    // 经度
       console.log(loc.coords.longitude);
} )

FormData的使用

<script src="./js/jquery-1.12.4.min.js"></script>       <!--导入jquery文件 -->
<script src="./template-web.js"></script>				<!--导入字符串引擎js -->
<script type="text/html" id="tp1">						<!-- 创建字符串模板 -->
    {{each}}									
        {{if $index == 0}}
            <li class="first">
        {{else}}
            <li>
        {{/if}}
            <a href="#"><img src="{{$value.data.cover}}" alt=""></a>
            <p>{{$value.data.title}}</p>
        </li>
    {{/each}}
</script>
<script>
    $.ajax({
        type: 'get',
        url: 'http://localhost:8000/admin/search',
        data: {
            state: '已发布',
            page: 1,
            perpage: 5,
        },
        success: function (res) {
            console.log(res);
            var str = template('tp1', res);             
            $('.focus_list').html(str);    
        }
    })
</script>

获取或者修改下拉菜单的值

<body>
    <select name="sel" id="se">                	 //下拉菜单   
        <optgroup label="水果">					//水果分组
                <option value="">苹果</option>
                <option value="banana">香蕉</option>
                <option>橙子</option>
        </optgroup>
        <optgroup label="食物"> 				    //食物分组
                <option value="">面包</option>
                <option value="辣条">辣条</option>
                <option>薯条</option>
        </optgroup>
        
    </select>
</body>
</html>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
    var apple = $('#se').val();             //获取下拉菜单的值
    console.log(apple);		
								获取value值注意:如果选项有value属性,就取这个value属性的值.
                     			              如果选项没有value属性,就取这个选项的文本.
    $('#se').val('banana');					//设置下拉菜单选择的值
    $('#se').val('橙子');					   //设置下拉菜单选择的值				
    console.log( $('#se').val())
</script>

a标签跳转有关的写法

	<a href="#">按钮1</a>              				   //直接跳转
    <a href="javascript:void">按钮2</a>				   //不执行跳转
    <a href="javascript:alert('我被点击了')">按钮3</a>	    //执行js代码
    <a href="javascript:test1()">按钮4</a>			   //调用函数
    <a href="javascript:test2(10)">按钮5</a>             
    <a href="#" id="link1">按钮6</a>						
    <a href="#" id="link2">按钮7</a>

<script>
        $(function () {
            function test1(){
                alert('我被点击了!test1');
            }
            function test2(mum){
                alert('我被点击了!' + num);
            }
           $('#link1').on('click',function(e){
                e.preventDefault();   //阻止事件的默认行为 后面的代码会执行
                alert('我被点击了');
           })
           $('#link2').on('click',function(e){
                return false ;         //阻止事件的默认行为 后面的代码不会执行
                alert('我被点击了');
           })
        })
</script>

随机数生成

function num(n, m) {      
           let num = Math.floor(Math.random()*(m-n+1))+n;
            return num;
        };
console.log(num(1,9));     //随机生成[1,9]区间里的整数

MD5的使用

//不带key的md5加密
var hash = md5('123456')
console.log(hash);//e10adc3949ba59abbe56e057f20f883e
//带key的md5加密
var hash = md5('123456', 'sbsbsb');
console.log(hash);//bb6ed6f74fc7df0d58e357a41d54d44e

//使用前必须导入md5.js
<script src="./md5.min.js"></script>

平滑滚动插件的使用 IScroll

-------原生js的平滑滚动( ☝注意必须导入iScroll的js文件)

<style>
  #wrapper{
      height:200px;
      background:#ccc;
      position: relative;   //为滚动条设置定位参考
  }
</style>

<div id="wrapper">          //对wrapper里面的内容进行平滑滚动
      <ul>
        <li>蜡笔小新</li>
        <li>蜡笔小新</li>
      </ul>
</div>

<script src="iscroll.js"></script>           //导入iScroll的js文件
<script>
	var myScroll = new IScroll('#wrapper',{   //#wrapper为选择器
      scrollbars: true,      
	});
</script>

-------vue的平滑滚动( ☝注意必须导入iScroll的js文件)

<div id="app">    
    <div class="box">
      <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
      </ul>
    </div>
</div>

<script src="vue.js"></script>
<script src="iscroll.js"></script>
<script>
    const app = new Vue({
      el: '#app',     
      data: {
        list: [
          '篮球',
          '足球',
          '西瓜'
        ],
        myScroll: null,
      },
      methods: {
        add() {
          this.list.push('这是一个寂寞的天,下着些伤心的雨');
        }
      },
      mounted() {
        this.myScroll = new IScroll('.box', {     //#wrapper为选择器
          scrollbars: true,					//这里的对象表示是展示滚动条
        });   
      },
      updated() {
        this.myScroll.refresh();
      },
    })
</script>

设置body和页面大小一样

<style>
    html,body{ 						//只需要设置html和body的height为100%;
      width: 100%;					//注意body有默认的8px的margin
      height: 100%;
    }
</style>

Element 的分页器的使用

 HTML结构内容
 <!-- @size-change为当页码容量发生改变执行的事件 -->
 <!-- @current-change为页码发生改变执行的事件 -->
 <!-- current-page当前所在的页码 -->
 <!-- page-size 页容量,当前页容量 -->
 <!-- :page-sizes="[10, 20, 30, 40]"  控制每页的容量 -->
 <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="pageIndex"
     :page-sizes="[10, 20, 30, 40]"
     :page-size="pageSize"
     layout="total, sizes, prev, pager, next, jumper"
     :total="totalcount"
 ></el-pagination>

所要设置的数据数据内容
data() {
    return {
		//当前所在的页
		pageIndex: 1,
		//获取的条数,当前页展示的条数
		pageSize: 10,
		// 获取到的数据内容的数组
		messagelist: [],
        // 获取到的总的数据条数
		totalData:0, 
  }
}

执行事件
methods: {
    getData(){
       //执行获取数据的代码  
    },
	//页码改变事件
	handleCurrentChange(page){
      	this.pageIndex = page;    //page页码改变后的页码
      	this.getData();   //重新执行获取数据的函数
	},
	// 页容量改变事件
	handleSizeChange(num){
      	this.pageSize = num;  //num页容量改变后的页容量
      	this.pageIndex= 1;    //页容量改变后并将页码改为1   
      	this.getData();		//重新执行获取数据的函数
	}
}

Mannero

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
部分项目总结

网页嵌套(iframe)  <a target="my_iframe" href="./1.html">1页面</a> <a target="my_iframe" href="./2.html">2页面</a> <a target...
复制链接

扫一扫