前端页面常用功能

最新推荐文章于 2022-06-17 03:47:39 发布

weixin_34107955

最新推荐文章于 2022-06-17 03:47:39 发布

阅读量1.6k

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/yangzhiwei256/blog/3016475

版权

2019独角兽企业重金招聘Python工程师标准>>>

滚动刷新

监控页面高度，使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果

界面

<form id="form1" runat="server">
<div style="height: 3000px; background-color: yellow;">
</div>
</form>

js操作逻辑

$(document).ready(function() {

  $(window).scroll(function() {

        //$(document).scrollTop() 获取垂直滚动的距离:最小值为0，最大值：文档高度-可视化窗口高度
        //$(document).scrollLeft()  获取水平滚动条的距离
        console.log("垂直滚动条位置："+$(document).scrollTop()+"--"+$(window).height());
                        
        if ($(document).scrollTop() <= 0) {
            console.log("滚动条已经到达顶部为0");
        }
                
        /**
        * $(document).height():文档的高度
        * $(window).height()：可视域的高度：窗口的大小：根据浏览窗口的大小变化
        * 判断底部:文档高度<=滚动条垂直高度+可视窗口的高度
        */
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            console.log("滚动条已经到达底部为" + $(document).scrollTop());
        }
});
 });

效果：

级联操作

CSS样式

.button {
    border: 1px ridge #ffffff;
    line-height:18px;
    height: 20px;
    width: 45px;
    padding-top: 0px;
    background:#CBDAF7;
    color:#000000;
    font-size: 9pt;
}

界面

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:280px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
</select>    
</td>
<td width="69" valign="middle">
<input name="add"  id="add" type="button"  class="button" value="-->" /> 
<input name="add_all" id="add_all" type="button"   class="button" value="==>" />
<input name="remove"  id="remove" type="button"   class="button" value="&lt;--" />
<input name="remove_all" id="remove_all" type="button"   class="button" value="&lt;==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" id="second">
<option value="选项6">选项6</option>
</select>
</td>
</tr>
</table>

js操作逻辑

$(document).ready(function(){
   
$("#add").click(function(){
	$("#first option:selected").appendTo($("#second"));
});

$("#add_all").click(function(){
	$("#first option").appendTo($("#second"));
});

$("#remove").click(function(){
	$("#second option:selected").appendTo($("#first"));
});

$("#remove_all").click(function(){
	$("#second option").appendTo($("#first"));
});
});

效果：

MD5 加密

md5属于消息摘要算法的一种，主要用于进行文件的完整性验证，无论任何数据经过md5加密就会生成固定长度的md5密文，如果中间数据经过修改md5密文，因雪崩效应md5码发生很大的改变，此外因md5单向加密的特性,无法反向解密，所以md5成为事实上文件完整性校验的主要标准。

界面

<body ng-app="myApp" ng-controller="myCtr"> 
	<p>md5加密算法：Message Digest  Algorithm MD5(消息摘要算法)</p>
	source:<input  ng-model="source"/><br>
	Md5码:{{md5()}} 
</body>

js处理逻辑

app=angular.module('myApp', []);
app.controller('myCtr', function ($scope) { 
	$scope.source = "";
	$scope.md5=function(){
		    if($scope.source.length!=0){
			return hex_md5($scope.source);
			}
		    return "";
     };
});

效果图：