PHP:将代码的逻辑更改为切换图像

标签 php jquery css wordpress progress-bar

我想更改订单跟踪图的当前图像(或状态栏，它显示带有进度的 img)我想更改当前图像并将状态更改为 6(20%、40%、 60%, 80%, 90% 100%) 我已经为它制作了 7 张图片，

第一个代码想法:我想，每个百分比“20%、40%、60%、80%、90% 100%”都有自己的图像，如果状态或百分比是 20，它将显示 img 20(想法/代码如下注:第一个代码)

下面的第二个代码:现在，它需要两张图片，一张是空的，一张是填充的，并显示与给定状态的完成百分比相对应的填充图像的宽度百分比。 例如，对于 27% 完成的状态，将显示 27% 的填充图像。如果您创建了一个空图像和一个填充图像，然后将它们命名为与插件的默认图像相同并将它们上传到插件的“图像”文件夹中，它将使用您的新图像而不是默认图像。

此插件的订单跟踪插件链接:https://wordpress.org/plugins/order-tracking/ 您可以在此处查看原始代码: Order-tracking 文件夹 > Function Folder > DisplayGraph.php

这是我 friend 的想法，我想实现它， 

 <style>
        .progress{
            width:50px;
            height:50px;
        }
        .class_1{
            background-image:url(/images/image1.jpg);
        }
        .class_2{
            background-image:url(/images/image2.jpg);
        }
        .class_3{
            background-image:url(/images/image3.jpg);
        }
        .class_4{
            background-image:url(/images/image4.jpg);
        }
        .class_5{
            background-image:url(/images/image5.jpg);
        }
    </style>



    <?php
        /* define your function outside of any loops */
        function setimage( $i=0 ){
            if( $i>=0 && $i<=20 ) return 'class_1';
            elseif( $i > 20 && $i <= 40 ) return 'class_2';
            elseif( $i > 40 && $i <= 60 ) return 'class_3';
            elseif( $i > 60 && $i <= 80 ) return 'class_4';
            else return 'class_5';
        }

        /* the portion of your html that displays the graphic percentage representation */
        $ReturnString .= "<div id='progress' class='progress ".setimage( $DisplayLength )."'></div>";


    ?>

这是我要更改的代码: 

<?php
function EWD_OTP_Display_Graph($OrderNumber) {
    global $wpdb;
    global $EWD_OTP_orders_table_name, $EWD_OTP_order_statuses_table_name;
    $Order = $wpdb->get_row($wpdb->prepare("SELECT * FROM $EWD_OTP_orders_table_name WHERE Order_Number='%s'", $OrderNumber));

    $Display_Graphic = get_option("EWD_OTP_Display_Graphic");
    $Statuses_Array = get_option("EWD_OTP_Statuses_Array");

    if (!is_array($Statuses_Array)) {$Statuses_Array = array();}
    foreach ($Statuses_Array as $Status_Array_Item) {if ($Status_Array_Item['Internal'] != "Yes") {$Filtered_Statuses_Array[] = $Status_Array_Item;}}
    foreach ($Filtered_Statuses_Array as $key => $Status_Array_Item) {
        if ($Order->Order_Status == $Status_Array_Item['Status']) {$CurrentStatus = $Status_Array_Item['Status']; $CurrentPercent = $Status_Array_Item['Percentage'];}
        elseif ($key == 0) {$StartingStatus = $Status_Array_Item['Status']; $StartingPercent = $Status_Array_Item['Percentage'];}
        elseif (($key+1) == sizeOf($Filtered_Statuses_Array)) {$EndingStatus = $Status_Array_Item['Status']; $EndingPercent = $Status_Array_Item['Percentage'];}
    }

    $Browser = get_user_browser();

    if ($Browser == "ie") {
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
        $ReturnString .= "<div class='ie-ewd-otp-empty-display ie-empty-graphic-" . $Display_Graphic . "'></div>";
            $ReturnString .= "<div class='ie-ewd-otp-full-display ie-full-graphic-" . $Display_Graphic . " ie-ewd-otp-display-length-" . $DisplayLength . "'></div>";
            $ReturnString .= "<div class='ie-ewd-otp-display-status' id='ie-ewd-otp-initial-status'>" . $StartingStatus . "</div>";
        $ReturnString .= "<div class='ie-ewd-otp-display-status ie-ewd-otp-current-status-length-" . $DisplayLength . "' id='ie-ewd-otp-current-status'>" . $CurrentStatus . "</div>";
        $ReturnString .= "<div class='ie-ewd-otp-display-status' id='ie-ewd-otp-ending-status'>" . $EndingStatus . "</div>";
    } else {
        if (($Display_Graphic == "Default") or ($Display_Graphic == "Streamlined") or ($Display_Graphic == "Sleek")) {  
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
            $ReturnString .= "<div class='ewd-otp-empty-display'>";
            $ReturnString .= "<img src='" . EWD_OTP_CD_PLUGIN_URL . "images/" . $Display_Graphic .".png' style='width: 100%'/></div>";
            $ReturnString .= "<div class='ewd-otp-full-display' style='width:" . $CurrentPercent . "%'>";
            $ReturnString .= "<img src='" . EWD_OTP_CD_PLUGIN_URL ."images/" . $Display_Graphic ."_Full.png' style='width: 100%; max-width: initial;'/></div>";
            $ReturnString .= "</div>";
            $ReturnString .= "<div class='ewd-otp-statuses'>";
            $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
            $ReturnString .= "<div class='ewd-otp-display-status ewd-otp-current-status-length-" . $DisplayLength . "' id='ewd-otp-current-status'>" . $CurrentStatus . "</div>";
            $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
            $ReturnString .= "</div>";
            $ReturnString .= "<div class='ewd-otp-clear'></div>";
        } else {
            if ($StartingStatus == $CurrentStatus or $EndingStatus == $CurrentStatus) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else if ($CurrentPercent >= 75 && $EndingStatus != $CurrentStatus) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 55%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else if ($CurrentPercent <= 25) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 5%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: " . ($CurrentPercent-20) . "%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            }
        }
    }
    return $ReturnString;
}
function get_user_browser() {
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $ub = '';
    if(preg_match('/MSIE/i',$u_agent))
    {
        $ub = "ie";
    }
    elseif(preg_match('/Firefox/i',$u_agent))
    {
        $ub = "firefox";
    }
    elseif(preg_match('/Safari/i',$u_agent))
    {
        $ub = "safari";
    }
    elseif(preg_match('/Chrome/i',$u_agent))
    {
        $ub = "chrome";
    }
    elseif(preg_match('/Flock/i',$u_agent))
    {
        $ub = "flock";
    }
    elseif(preg_match('/Opera/i',$u_agent))
    {
        $ub = "opera";
    }
    return $ub;
}
?>

谢谢!

最佳答案

我建议采用一种完全不同的方法:临时创建条形图。

从 HTML 代码的 Angular 来看，条形图是显示或更新网页时包含的图像。但是，在这种情况下，这些图像不是静态图像文件；它们是由 php 脚本动态创建的。

优点:

  • 无缝缩放，真正的值(value)，不仅仅是步骤
  • 增强功能，例如颜色、界限、网格。

缺点:

  • 每次更新都请求发送到服务器。
  • Graph图片不能预加载，每次都传过来。

下面显示的代码是用来显示资源图的，但同样可以用来创建进度图。这些图只是条形图。有几个参数可用于对图形进行泰勒化。

参数

  • width:图形的宽度(像素)
  • height:图形的高度(像素)
  • 值:进度值(百分比)
  • limit1:第一个警告限制(100 值*，百分比)
  • limit2:第二次警告限制(100 值*，百分比)
  • grid:是否显示网格('true')或不显示('false'，或未设置参数)
  • color:颜色名称，('white', 'black', 'lightgrey', 'darkgrey', 'midgrey', 'grey', 'yellow', 'orange', 'brown', 'cyan' 之一, '洋红色', '蓝色', '深蓝色', '绿色', '红色', '浅红色')
  • rgb:RGB表示法的颜色值；覆盖“颜色”参数。
    红色、绿色和蓝色值可以写为十进制值(例如 255)或十六进制值(例如 0xFF)。
    红色、绿色和蓝色值由管道字符 (|) 分隔。
    示例:rgb=255|0x33|0x70

(*) 当资源消耗达到相应数量时。

使用示例

您可以生成 <img .../>通过服务器端的 php 脚本标记。您还可以在客户端通过一段 Javascript 设置“img”元素的“src”属性。

示例 HTML 代码:

<img id="progressbar" src="/bargraph.php?width=180&height=12&value=33&color=blue&grid=false" alt="Progress" />

示例 Javascript 代码:

var progress = 0;

function setProgressBar(id,progress) {
  var elem = document.getElementById(id);
  if (var) var.src = "/bargraph.php?width=180&height=12&value=" + progress + "&color=blue&grid=true";
}

// Maybe periodically do ...
progress += 5;
setProgressBar("progressbar", progress);
// ...

它的样子(带网格):

enter image description here

代码(bargraph.php)

<?php
// We honor both request methods (GET/POST)
$params = array();
foreach($_REQUEST as $key => $value) $params[strtolower($key)] = $value;

// Assume default values if necessary
$wd = (empty($params{'width'})) ? 40 : (integer)$params{'width'};
$hg = (empty($params{'height'})) ? 8 : (integer)$params{'height'};
$vl = (empty($params{'value'})) ? 0 : (integer)$params{'value'};
$l1 = (empty($params{'limit1'})) ? 0 : 100-(integer)$params{'limit1'};
$l2 = (empty($params{'limit2'})) ? 0 : 100-(integer)$params{'limit2'};
$gr = (empty($params{'grid'})) ? 0 : ( (strtolower($params{'grid'})=='true') ? 1 : 0) ;

// Set grid parameters
define('numgrid',10);
if ($gr) {
    $xd = floor($wd / numgrid); $wd = $xd * numgrid;
    $wd0 = $wd;
    $wd -= 1;
} else {
    $xd = 0;
    $wd0 = $wd;
}

// Create the image
$img = imagecreatetruecolor($wd,$hg);

// Define color palette
$colors = array(
    'white' => imagecolorallocate($img,0xFF,0xFF,0xFF),
    'black' => imagecolorallocate($img,0,0,0),
    'lightgrey' => imagecolorallocate($img,0xE0,0xE0,0xE0),
    'darkgrey' => imagecolorallocate($img,0x66,0x66,0x66),
    'midgrey' => imagecolorallocate($img,0x99,0x99,0x99),
    'grey' => imagecolorallocate($img,0xC0,0xC0,0xC0),
    'yellow' => imagecolorallocate($img,0xFF,0xFF,0x00),
    'orange' => imagecolorallocate($img,0xFF,0xD7,0x00),
    'brown' => imagecolorallocate($img,0x66,0x66,0x00),
    'cyan' => imagecolorallocate($img,0x00,0xc0,0xc0),
    'magenta' => imagecolorallocate($img,0xc0,0x00,0x90),
    'blue' => imagecolorallocate($img,0x00,0x00,0xc0),
    'darkblue' => imagecolorallocate($img,0x00,0x51,0x8C),
    'green' => imagecolorallocate($img,0x00,0xc0, 0x00),
    'red' => imagecolorallocate($img,0xCC,0x00, 0x00),
    'lightred' => imagecolorallocate($img,0xFF,0x33, 0x33),
);
if (isset($params['rgb']) && !empty($params['rgb'])) {
    $col = explode('|',$params['rgb']);
    if (count($col)==3) {
        $colors['rgb'] = imagecolorallocate($img,$col[0],$col[1],$col[2]);
        $params['color']='rgb';
    }
}

// Evaluate colors 
$params['color']= strtolower($params['color']);
$lim1_color = $colors['yellow'];
$lim2_color = $colors['lightred'];
$color = (isset($params['color']) && isset($colors[$params['color']]))  
    ? $params['color']
    : 'cyan';
$active_color = $colors[$color];
if ($gr) {
    $inactive_color = $colors['grey'];
    $background_color = ($color=='midgreay') 
        ? $colors['lightgreay'] 
        : $colors['midgrey'];
    $delim_color = $colors['white'];
} else {
    $inactive_color =  $colors['white'];
    $background_color = $colors['grey'];
}


// Fill image with active / inactive colors
$x1 = 0; $y1 = 0;
if (($wd>3) && ($hg>3)) {
    imagefill($img,0,0,$background_color);
    imagefilledrectangle ($img,$x1+1,$y1+1,$wd0-2,$hg-2,$inactive_color);
} else {
    imagefill($img,0,0,$inactive_color);
}
$x2 = ceil(($wd0 / 100) * $vl);
if ($x2>0) { imagefilledrectangle ($img,$x1,$y1,$x2-1,$hg-1,$active_color); }
// Paint grid and limit bars
if ($gr) {
    for ($i = 0; $i <= (numgrid); $i++) {
        $x1 = ($i * $xd);
            imageline($img,$x1,0,$x1,$hg-1,$delim_color);
    }
}
if ($l1) { $x2 = ceil(($wd0 / 100) * $l1); imageline($img,$x2,0,$x2,$hg-1,$lim1_color); }
if ($l2) { $x2 = ceil(($wd0 / 100) * $l2); imageline($img,$x2,0,$x2,$hg-1,$lim2_color); }

// Avoid caching
header("Expires: Mon, 01 Jan 1999 00:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Always modified
header("Cache-Control: private, no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0

// Send out, then destroy the image
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
?>

当然，您可以修改代码以更改条形图的最终外观。

关于PHP:将代码的逻辑更改为切换图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35358067/

上一篇：css - child 的边距和 parent 的边界

下一篇：javascript - 在带有文本的 span 之后创建内容可编辑的 div

相关文章：

javascript - 如何在 $.get URL 中调用 this.id

php - 我怎样才能加快与 MYISAM 性能相媲美的 INNODB 查询？

php - 通过 AJAX 将两个 JSON 模型对象从 PHP 传递到 JS

javascript - 页面加载时检查按下的鼠标按钮

CSS flex 盒 : Aligning Children of Flex Items

php - 根据其他字段的值自动更新mysql字段

javascript - 将表情符号发送到我的文本区域

jquery - Bootstrap 3 Scrollspy 删除事件状态

javascript - 倒计时仅适用于第一个按钮，但不适用于其他按钮

jquery - 在响应式菜单中显示事件链接

©2024 IT工具网  联系我们