Menu
Woocommerce Menu

七个很有意思的PHP函数,jquery实现的一个简单进度条效果实例

0 Comment

PHP有成都百货上千放置函数,当中多数函数都被程序猿遍布选用。但也许有一点函数隐敝在角落,本文将向大家介绍7个无人问津,但用处相当大的函数。
没用过的技师不要紧过来看看。

jquery完毕三个进程条的功效,也许在此地未有怎么实际的功用,不过曾经落实了进程条的局地原理,前端是怎么落实这种过程效果的。

DIV:

1.highlight_string()
当须要在三个网址中展现PHP代码时,highlight_string()函数就变的极其平价了。该函数通过动用PHP语法高亮程序中定义的颜色,输出或回到给定的PHP代码的语法高亮版本。
示例:

效果与利益演示:

复制代码 代码如下:

复制代码 代码如下:

图片 1

<div class=”pic_conent”>
<div class=” fn-pr pic_layer”>
<!–图片文字介绍透明层–>
<section class=”bg text_layer_home p10 font-yahei fn-bc”>
   <h2 class=”f14 fefefe”>${pic.desc}</h2>
<aside class=”f12 bbb”>
<c:if test=”${not empty pic.poi}”>
<span class=”scenery fn-fl”>${pic.poi}</span>
</c:if>
<span class=”fn-fr mt10″>by ${pic.username}</span>
</aside>
</section>
<img src=”${pic.picUrl}” width=”320″ height=”420″ />
</div>
</div>

<?php
highlight_string(‘<?php phpinfo(); ?>’);
?>

进程条达成源码:

CSS:

2.str_word_count()
该函数必需求传送叁个参数,依照参数类型重返单词的个数。如上面包车型客车所示:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>jquery达成进度条</title>
<style>
 .progressBar{width:200px;height:8px;border:1px solid
#98AFB7;border-radius:5px;margin-top:10px;}
 #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type=”text/jscript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
 function progressBar(){
  //初始化js进度条
  $(“#bar”).css(“width”,”0px”);
  //进程条的速度,越小越快
  var speed = 20;

.pic_conent{
height: 720px;/*本条惊人会被js改掉*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.pic_layer{text-align:center; width:100%; display:inline-block;
vertical-align:middle;}

<?php
$str = “How many words do I have?”;
echo str_word_count($str); //Outputs 6
?>

  bar = setInterval(function(){
   nowWidth = parseInt($(“#bar”).width());
   //宽度要不能够赶过进程条的总增长幅度
   if(nowWidth<=200){
    barWidth = (nowWidth + 1)+”px”;
    $(“#bar”).css(“width”,barWidth);
   }else{
    //进程条读满后,甘休
    clearInterval(bar);
   } 
  },speed);
 }
</script>
</head>

jquery:

3.levenshtein()
该函数重要重临多少个字符串之间的Levenshtein距离。Levenshtein
距离,又称编辑距离,指的是八个字符串之间,由三个转变来另二个所需的最少编辑操作次数。许可的编纂操作包罗将四个字符替换来另一个字符,插入一个字符,删除二个字符。该函数对寻觅客户所付出的错别字特别有效。

<body>
 <input type=”button” value=”开始” onclick=”progressBar()” />
 <div class=”progressBar”><div
id=”bar”></div></div>
</body>
</html>

复制代码 代码如下:

示例:

 

$(function() {
var surH = $(window).height();
$(“.pic_conent”).height(surH);
window.onresize=function(){
var surH = $(window).height();
$(“.pic_conent”).height(surH);
}

复制代码 代码如下:

你或者感兴趣的稿子:

  • jQuery
    progressbar通过Ajax乞请完结后台进度实时功用
  • jQuery EasyUI API 中文文书档案 – ProgressBar
    进度条
  • 基于jquery 的一个progressbar
    widge
  • jquery.ui.progressbar
    华语文书档案
  • jquery
    简单的进程条完毕代码
  • 6款新颖的jQuery和CSS3进程条插件推荐
  • 享受8款卓越的 jQuery
    加载动画和进度条插件
  • Javascript jquery css
    写的简易进程条控件
  • Jquery
    Uploadify上传带进程条的粗略实例
  • jQuery EasyUI
    ProgressBar进程条组件

您大概感兴趣的小说:

  • 用纯CSS完结容器内图片上下左右居中
标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图