2. 程式人生 > >環形進度條（jQuery，canvas）

環形進度條（jQuery，canvas）

阿新 • • 發佈：2019-02-05
(function($) { /*! * nayi_224 * 2018/08/02 * */ $.fn.singlePie = function(options) { options = options || {}; var innerDivHtml = ""; var innerDivId = guid(); innerDivHtml += "<div id=\"" + innerDivId + "\" style=\"position: absolute;z-index: 99;top: 150px;left: 150px\"></div>"
; jQuery(this).append(innerDivHtml); var jInnerDiv = jQuery("#" + innerDivId); var canvasHtml = ""; var canvasId = guid(); canvasHtml += "<canvas id=\"" + canvasId + "\" width=\"300px\" height=\"300px\"></canvas>"; jQuery(this).append(canvasHtml); var
canvas = jQuery("#" + canvasId)[0]; var jCanvas = jQuery("#" + canvasId); var cc = canvas.getContext("2d"); if(!canvas.getContext) return; var c_height = jCanvas.height(); var c_width = jCanvas.width(); var r = (c_height > c_width ? c_width : c_height) / 2
* 0.9; var num = options.num || 0; cc.beginPath(); cc.lineWidth = options.lineWidth || 5; cc.strokeStyle = options.lineColor || "#f35444"; cc.arc(c_width / 2, c_height / 2, r, Math.PI / 2 * 3, Math.PI / 2 * (3 + (num / 100) * 4), false); cc.stroke(); cc.closePath(); cc.beginPath(); cc.strokeStyle = options.spaceColor || "#f3f3f3" ; cc.arc(c_width / 2, c_height / 2, r, Math.PI / 2 * (3 + (num / 100) * 4), Math.PI / 2 * 7, false); cc.stroke(); cc.closePath(); var innerDivWidth = jInnerDiv.width(); var innerDivHeight = jInnerDiv.height(); jInnerDiv.append(options.innerHtml); jInnerDiv.css("top", (jCanvas.height() / 2 - jInnerDiv.height() / 2) + "px"); jInnerDiv.css("left", (jCanvas.width() / 2 - jInnerDiv.width() / 2) + "px"); //console.log(innerDivId); //console.log(options.innerHtml); function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } function guid() { return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } }; })(jQuery); var options = { num: 60, //數字，用於計算百分比 innerHtml: function(){ var temp = ""; temp += "<div class='inner_sub_div' >60</div>" temp += "<div class='inner_sub_div' >描述</div>" return temp; }, //描述 lineWidth: 5, //線寬度 lineColor: "#f35444", //線顏色 spaceColor: "#f3f3f3" //透明線顏色 }; jQuery("#yCancasDivId").singlePie(options);

相關推薦

環形進度條（jQuery，canvas）

(function($) { /*! * nayi_224 * 2018/08/02 * */ $.fn.singlePie = function(options) { options = options || {}; var innerDivHtml

Android-SpinKit 載入進度條（登入，網路請求）

Gradle 配置： allprojects { repositories { maven { url "https://jitpack.io" } } } compile 'com.github.ybq:Android-SpinKit

檔案上傳 含進度條（fileupload控制元件）

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">之前的專案一直沒有涉及到達的檔案上傳，所以沒有用到進度條，這幾天不忙，所

Android簡單自定義進度條（小白進）

今天，我在騰訊課堂學習了自定義一個進度條，視訊連結：https://ke.qq.com/course/144239#term_id=100163342，我根據此視訊教程，寫了關於此程式碼的詳細註釋，非常簡單，非常適合小白學習。 主要步驟是: 1.

WKWebView載入進度條（仿微信）

WKWebView添加了estimatedProgress屬性（double型別），我們可以利用該屬性來設定UIProgressView 為頁面新增UIProgressView屬性 @pro

Unity3D研究院之非同步載入遊戲場景與非同步載入遊戲資源進度條（三十一）

          非同步任務相信大家應該不會陌生，那麼本章內容MOMO將帶領大家學習Unity中的一些非同步任務。在同步載入遊戲場景的時候通常會使用方法 Application.LoadLevel(“yourScene”);  這句程式碼執行完畢後程序會幹什麼呢？？如下圖所示，這是我隨便找了一個遊戲場景

學習進度條（第六周）

知識 本周 align 地鐵 servlet 就是 let body border

Axure原型制作案列--進度條（基於動態面板）

分享圖片 基於 alt 技術 圖片 inf 小數 估計 剛才 效果圖：https://s17.aconvert.com/convert/p3r68-cdx67/nmntf-wq722.gif 第一步：頁面放入矩形（命名為：bg）元件作為背景條，寬高分別為：280*18,

svg 環形進度條加讀取進度效果（讀數效果）-- 移動端 rem 適配

專案需求做一個環形進度條的效果需要有一個讀數的效果，在網上查閱相關資料後整理了下 gif 效果如下，錄製的不是很流暢多停留下時間看下 都是動態的效果 程式碼如下 <!DOCTYPE html> <html lang="en">

封裝進度條（react + 無狀態元件，補充antd.desgin進度條 ）

需求要做一個進度條，發現antd沒有符合的樣式，於是自己寫了一個，使用react + 無狀態元件封裝完成 這是進度條的效果圖： 可複製到專案，只需要3行程式碼就可以直接使用， 傳參（isStatus：num ; 當前的值，actionList：Array; 進度條所有的項 ）使用：

圓形進度條（canvas）

效果如下圖： 程式碼如下 <canvas class="pull-right list_canvas" width="200" height="200" style="height:100px;width:100px"></canvas>

Echarts環形進度條使用二（修改部分）

可參考https://blog.csdn.net/zhalcie2011/article/details/55808145///////////////////////////////////////////////////////////一】修改進度條顏色參考：https:

Android花樣loading進度條（二）-簡單環形進度條

背景 Android花樣loading進度條系列文章主要講解如何自定義所需的進度條，包括水平、圓形、環形、圓弧形、不規則形狀等。 本篇我們從圓形進度條講起，講簡單形式的環形進度條，只有進度色彩，沒有進度文字，主要是使用Canvas繪製圓和圓弧。 效果

HTML5_canvas（設定畫筆樣式、左右跑動的小塊、繪製路徑的方法、寫字板、繪製圓形的方法、吃豆豆、繪製文字、環形進度條）設定一個模板

1、canvas（相當於畫圖板） 這句話是必須寫的 在版本高的瀏覽器中支援就不會顯示出來，版本低的就會顯示出 —->寬高樣式直接在裡面寫；（預設寬度300，高度150）  設定畫筆樣式

android 視訊錄製進度條（分段錄製，回滾刪除，類似美拍錄製）

最近因為公司啟動微視訊專案，負責視訊錄製及視訊編輯這塊工作，而首先視訊錄製這塊需要支援分段錄製，和回滾刪除功能。 所以就做了這麼繼承View自定義了這個一個進度條小demo，有待完善及優化。 效果圖先出場 因為比較簡單加上有註釋，就不再多囉嗦，直接上程式碼

進度條（點選一次進一點，意思是後臺傳入一個數就進度就多一點）

<!DOCTYPE"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>進度條</title> <style type="text

使用jquery-circle-progress繪製canvas漸變環形進度條

本文介紹如何使用jquery-circle-progress繪製canvas漸變環形進度條。先引入檔案：<script src="jquery-1.11.0.min.js"></script> <script src="circle-progre

每周進度條（第十六周）

動態表格 caption ble 創建 tab 表格 oid 代碼 border 第十六周進度條 第十六周 所花時間 3h 代碼量（行） 200 博客量（篇） 1 學到的知識 Android之間頁面的切換 創建動態表格 每周進度條（第十六

js源碼 模仿 jquery的ajax的獲取數據（get，post ）的請求封裝

{} req turn eva syn 動作 取字符串 func ring function ajax(obj){ // 默認參數 var defaults = { type : ‘get‘, data : {}, url : ‘#‘, dataType : ‘text‘,

使用canvas實現環形進度條

cti anim 效果 math png utf-8 context request var html代碼： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta