整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          第十二天javascript篇之函數,對象,開發時鐘

          第十二天javascript篇之函數,對象,開發時鐘實戰代碼

          .昨日回顧

          函數

          函數的概念:將一段常用代碼進行命名,這個名稱就叫“函數”。

          函數的步驟:(1)先定義函數,函數定義后不能直接執行,必須調用函數,函數才會執行

          (2)調用函數:直接寫函數名稱,后面直接跟一個小括號,小括號中可以有“實參”

          函數語法格式:

          function functionName([形參1][,形參2][,形參3])

          {

          實現一個功能的程序代碼;

          [return 參數]

          }

          語法說明:

          函數名稱的命名同變量一樣;

          形式參數:定義函數的參數就叫“形式參數”,該參數接受調用函數時傳遞過來的值

          形式參數的命名,同變量也一樣;

          形式參數不能是具體的值;比如:function getMax(10,20)是錯誤的

          函數定義了,就必須要調用;

          調用函數用時,直接寫函數名稱,后跟小括號,括號中是“實參”;

          實際參數:調用函數時,傳遞的參數叫“實參”,就是“實際的數據”;

          形式參數和實際參數的個數和順序應保持一致;

          Return語句:可以調用函數者返回一個結果;

          Return語句執行后,立即結束函數的運行;

          如果return語句后面,還有其它程序代碼,將不再執行;

          因此,return語句放在函數的最后面;

          JS中是區分大小寫的,但關鍵字一律小寫;對象的方法:today.toLocaleString()

          全局變量和局部變量

          全局變量:可以在任何地方(函數內部和函數外部)使用的變量,就叫“全局變量”;

          一般來說,在函數外部定義的變量,是“全局變量”;

          省略關鍵字var定義的變量,也是“全局變量”,一般情況下不要省略;

          局部變量:只能在函數內部使用的變量,叫“局部變量”。

          注意:在JS中,在函數外部定義的變量,可以在函數內部使用;但在函數內部定義的變量,只能在函數內部使用。

          將函數定義作為數據,賦給其它變量

          • 將函數定義,賦給一個基本數據類型的變量

          function showInfo()

          {

          return “我是一個函數”;

          document.write(“我是一個函數”);

          }

          var a=showInfo; //將函數定義(地址),賦給一個變量,變量a是復合數據類型

          document.write(a() );

          var b=showInfo(); //將函數的執行結果,賦給一個變量b,變量b是基本數據類型

          注意的是:函數名showInfo后不能跟小括號;

          如果showInfo后面跟了小括號,就是調用函數,將函數的執行結果,賦給a變量,而不是地址

          • 將函數定義,賦給一個數組元素,那么,該數組元素就是一個函數了;

          Var arr=[10,20,30];

          arr[1]=showInfo(); //arr[1]的值是“我是一個函數”

          arr[2]=showInfo; //arr[2]就變成了函數

          document.write( arr[1] );

          document.write( arr[2]() ); //既然arr[2]是一個函數,在調用時,一定要寫小括號

          3)將函數定義,賦給一個對象屬性,那么,該對象的屬性就是一個函數了;

          var obj={

          name:“張三”,

          age:30,

          show:showInfo //將函數定義,賦給了一對象屬性

          };

          obj.show(); //方法和函數的定義是一樣的,只是在不同的地方叫法不一樣

          document.write( obj.name );

          基本數據類型和復合數據類型

          基本數據類型:是將變量名稱和變量的值,都存入“快速內存”“棧內存”;

          將基本數據類型的變量,賦給其它變量,是將原來變量的值“復制”一份,放到了新變量中,因此,這兩個變量沒有任何關系,換句話說:修改其中一個變量的值,另一個變量的值不會改變;

          var a=10; //基本數據類型,在賦值是地,是傳值

          var b=a; //將a的值,復制一份,傳給b

          a=100; //給變量a重新賦值

          document.write(b); //求變量b的值,是否會改變

          引用數據類型(復合數據類型):它的存儲分兩個部分,一是把數據存到“慢內存”“堆內存”,二是將變量名稱和數據地址存到“快速內存”“棧內存”。

          換句話說:就是新變量和舊變量,同時指向了同一個數據地址,只是變量名稱不一樣。

          var arr1=[1,10,20,30];

          var arr1=new Array(1,10,20,30);

          var arr2=arr1; //將arr1賦給了arr2,其實,這里傳的數據地址,并不是具體的數據

          arr1[0]=100; //對arr1中的第1個元素,重新賦值

          document.write( arr2[0] );

          補充知識點:for in循環

          For ……in主要是循環或遍歷,數組元素對象的屬性

          注意:如果遍歷數組的話,未定義的數組元素,不會輸出;只會輸出有效數據。

          語法結構:

          for(index in arr)

          {

          document.write( arr[index] );

          }

          參數說明:

          arr代表一個數組;

          index代表一個數組元素的下標;

          舉例:

          var arr=[1,2,,,,,3,,,,,,,,,,,,,,,,,4];

          遍歷對象屬性

          for(name in window)

          {

          document.write( name );

          }

          參數說明:

          Name就是遍歷對象,返回的屬性名稱;

          Window是一個窗口,代表當前瀏覽器窗口,比如:document、 history、screen、 navigator等

          2.函數對象

          一個函數對應一個函數對象。

          arguments屬性:函數對象的一個數組對象屬性,包含了所有接收到的參數

          arguments.length:取得所有接收到的參數的個數

          arguments是在函數內部來使用;

          3.對象

          對象是一組屬性和方法的集合。

          JS中的對象分類:

          自定義對象:自己根據需要定義自己的對象;var obj={}

          JS內置對象:

          String:字符串對象,提供字符串操作的屬性和方法。比如:length

          Array:數組對象,提供數組操作的屬性和方法。比如:length

          Date:日期時間對象,提供訪問系統時間日期的信息。比如:getDay()、toLocaleString()

          Math:數學對象,提供數學處理的方法。比如:Math.floor()、Math.ceil()、Math.round()

          Number:數字對象。比如:toFixed()

          Function:函數對象。比如:arguments數組對象

          Event:事件對象。比如:onMouseOver、onMouseOut、onClick、onLoad

          正則對象:正則表達式,對數據進行更嚴格的驗證。(就業班講)

          BOM和DOM對象(核心)

          BOM提供了訪問和操作瀏覽器各組件的途徑;

          DOM提供了訪問和操作網頁中各HTML元素的途徑

          4.自定義對象

          對象就是一組屬性和方法的集合。

          一、創建自定義對象

          (1)使用new關鍵字和Object()來創建一個空對象,然后添加屬性和方法

          方法就是函數,在對象中的函數,就叫“方法”。

          Var obj=new Object();

          obj.name=“張三”; //增加一個屬性,并賦值

          obj.sex=“男”;

          obj.age=30;

          obj.isMarried=true;

          obj.school=null;

          obj.showInfo=function(){

          var str=this.name+“的基本資料”;

          str +=“<br>姓名:”+this.name;

          }

          onload:當網頁加載完成,去執行JS程序代碼。

          當網頁的中所有HTML標記都加載完成后,才會觸發onLoad事件;

          觸發onLoad事件后,會去調用相應的JS程序。

          只要<body>中有一個HTML標記沒有顯示出來,onLoad就不會發生

          <body>……</body>……onload事件……調用JS函數——document.write

          2)使用{}來創建對象

          Var obj={

          name:“張三”,

          sex:true

          }

          5.JS的內置對象——String對象

          一個字符串的變量,就是一個String對象。

          一、創建String對象的方法

          1)使用new關鍵字和String()構造函數來創建(不常用)

          var strObj=new String(“Welcome”);

          var len=strObj.length; //獲得字符串的長度

          • 定義一個字符串變量,就對應一個String對象(最常用)

          var str=“重蔚自留地”;

          var len=str.length;

          二、String對象的屬性和方法

          length:獲得字符串的長度,var len=str.length

          注意:JS的length是指字符個數,并不是按字節來計算。

          charAt(index):返回指定位置的一個字符。

          提示:String中的下標與Array中的下標一樣。

          index:表示指定位置的下標(索引號)

          舉例:

          var str=“Welcome”;

          var str1=str.charAt(str.length-1) //取得最后一個字符

          indexOf(substr[,startIndex])

          描述:從原字符串中,查找子字符串,如果找到,返回起點索引號;如果未找到,返回-1。

          參數:

          substr:子字符串

          startIndex:開始查找的位置索引號。如果省略,則從0開始查找。

          lastIndexOf(substr[,startIndex])

          描述:在原字符串中,從右往左搜索子字符串,如果沒有找到,則返回-1。

          參數:同indeOf()方法一樣

          substr(startIndex[,length])

          描述:返回一個子字符串。

          參數:

          startIndex:開始索引號

          length:返回幾個字符。如果length省略,返回到結束的所有字符。

          舉例:

          var str=“welcome”;

          var str2=str.substr(3,2); // str2=co

          substring(startIndex[,endIndex])

          描述:返回索引號從startIndex到索引號endIndex之間的一個子字符串。

          參數:

          startIndex:開始索引號

          endIndex:結束索引號,如果省略,返回到結尾的所有字符。

          split(separator)

          描述:將一個字符串,用指定分割符separator分成一個數組

          參數:separator就是一個分割符

          舉例:

          Var str=“星期一,星期二,星期三”;

          Var arr=str.split(“,”);

          search(substr)

          描述:查找指定的子字符串,如果沒有找到,返回-1

          replace(substr,replacement)

          描述:在原始字符串中,將一個指定的子字符串,替換成指定的內容。

          參數:

          Substr:要查找的內容

          Replacement:要替換的內容

          注意:如果不使用“正則表達式”,則只能替換一次。

          var new=str.replace(/X/g,”itcast”); //JS中的正則,是放在//中間的,不能加引號。g參數代表全部替換。

          toLowerCase()

          描述:轉成小寫

          舉例:str.toLowerCase()

          toUpperCase()

          描述:轉成大寫

          舉例:str.toUpperCase()

          localeCompare(str)

          描述:對字符串使用本地規則進行比較。我們使用的操作系統是中文操作系統,中文操作系統默認的排序規則就按“拼音”先后來排序的。

          str1.localeCompare(str2)

          如果str1 > str2 則返回一個大于0的值

          如果str1=str2 則返回一個等于0的值

          如果str1<str2 則返回一個小于0的值

          onchange:當選擇內容發生改變時,去調用JS驗證函數。

          6.Array對象

          length:取得數組元素的個數

          shift():刪除第一個數組元素,數組的長度-1。

          pop():刪除最后一個數組元素,數組的長度-1

          unshift():在開頭添加一個數組元素,數組的長度+1

          push():在最后添加一個數組元素,數組的長度+1

          注意:delete刪除的是數組元素的內容,而shift()刪除的是內容和下標。

          join([separator)):將數組各個元素,用指定的連接符,連成一個字符串。與split()正好相反

          separator是可選項,如果省略,則用逗號連接。

          reverse():反轉數組中各個元素,顛倒順序。

          sort()

          描述:對數組中各個元素進行排序,默認是按字母的先后順序排列。

          格式:arr.sort([orderby])

          參數:orderby是可選參數,它指定排序的規則,一般是一個函數。

          (1)對數值進行排序

          orderby函數必須接收兩個參數,比如a和b;

          orderby函數中使用return返回值;

          如果a-b>0,返回1

          如果a-b=0,返回0

          如果a-b<0,返回-1

          var arr=[1,2,10,12,3,31,15,19,25,39];

          arr.sort(orderby);

          function orderby(a,b)

          {

          return a-b;

          }

          document.write(arr);

          7.Date對象

          一、創建Date對象的實例

          (1)使用new關鍵字和Date()構造函數來創建

          Var today=new Date(); //注意:如果不帶參數,則創建一個當前系統時間的實例

          (2)指定一個日期時間字符串參數

          Var yestoday=new Date(“1990/10/23 10:09:00”); //可以創建基于某一個時間的一對象實例

          二、Date對象的方法

          getFullYear():取出四位的年份

          getMonth():取出月份,取值0-11

          getDate():取出天數

          getHours():取出小時數

          getSeconds():取出秒數

          getMinutes():取出分鐘數

          getDay():取出星期值,取值:0-6

          getTime():取出距離1970年1月1日,0時0分0秒的毫秒數

          toLocaleString():轉成字符串

          、前言

          在上一篇文章寫了個高仿WIN10系統的光暈日歷,這次來繪制一個光暈的時鐘,也是在某些網頁上看到的效果,時分秒分別以進度條的形式來繪制,而且這個進度條帶有光暈效果,中間的日期時間文字也是光暈效果,整體看起來有點科幻的感覺,本控件沒有什么技術難點,如果真要有難點的話也就是如何產生這個光暈效果,在使用painter繪制的時候,設置畫筆,可以設置brush,brush可以是各種漸變效果,這個就非常強大了,主要有線性漸變、圓形漸變、錐形漸變,這三種漸變用得好,各種效果都得心應手隨手拈來。


          為了產生光暈效果,需要用到圓形漸變,并對圓形漸變中的不同的位置設置透明度值來處理,時分秒對應的進度可以自動計算出來,這個不難,比如直接用QTime可以獲取對應的時分秒,然后時鐘和分鐘除以60,秒鐘除以1000來獲取對應的進度。繪制光暈文本采用的QPainterPath的addText來實現。

          二、實現的功能

          • 1:可設置圓弧半徑寬度
          • 2:可設置光暈寬度
          • 3:可設置光暈顏色
          • 4:可設置文本顏色
          • 5:采用動畫機制平滑進度展示時間

          三、效果圖

          四、頭文件代碼

          #ifndef SHADOWCLOCK_H
          #define SHADOWCLOCK_H
          
          /**
           * 光暈時鐘控件 作者:雨田哥(QQ:3246214072) 整理:feiyangqingyun(QQ:517216493) 2019-10-07
           * 1:可設置圓弧半徑寬度
           * 2:可設置光暈寬度
           * 3:可設置光暈顏色
           * 4:可設置文本顏色
           * 5:采用動畫機制平滑進度展示時間
           */
          
          #include <QWidget>
          
          #ifdef quc
          #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
          #include <QtDesigner/QDesignerExportWidget>
          #else
          #include <QtUiPlugin/QDesignerExportWidget>
          #endif
          
          class QDESIGNER_WIDGET_EXPORT ShadowClock : public QWidget
          #else
          class ShadowClock : public QWidget
          #endif
          
          {
              Q_OBJECT
              Q_PROPERTY(int radiusWidth READ getRadiusWidth WRITE setRadiusWidth)
              Q_PROPERTY(int shadowWidth READ getShadowWidth WRITE setShadowWidth)
          
              Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
              Q_PROPERTY(QColor shadowColor READ getShadowColor WRITE setShadowColor)
          
          public:
              explicit ShadowClock(QWidget *parent=0);
              ~ShadowClock();
          
          protected:
              void paintEvent(QPaintEvent *);
              void drawArc(QPainter *painter, int radius, qreal angle);
              void drawText(QPainter *painter);
          
          private:
              int radiusWidth;            //半徑寬度
              int shadowWidth;            //光暈寬度
          
              QColor textColor;           //文本顏色
              QColor shadowColor;         //光暈顏色
          
          public:
              int getRadiusWidth()        const;
              int getShadowWidth()        const;
          
              QColor getTextColor()       const;
              QColor getShadowColor()     const;
          
              QSize sizeHint()            const;
              QSize minimumSizeHint()     const;
          
          public Q_SLOTS:
              //設置半徑寬度+光暈寬度
              void setRadiusWidth(int radiusWidth);
              void setShadowWidth(int shadowWidth);
          
              //設置文本顏色+光暈顏色
              void setTextColor(const QColor &textColor);
              void setShadowColor(const QColor &shadowColor);
          };
          
          #endif // SHADOWCLOCK_H
          
          
          

          【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】

          點擊這里:Qt資料領取(視頻教程+文檔+代碼+項目實戰)

          css3實現圓盤時鐘,總要的兩個要點是css3動畫(animation )屬性與css3過渡(transform)屬性。

          例如:

          animation: rotate_origin 86400s linear infinite;意思是執行一個名叫rotate_origin的動畫,完成一個周期需要86400秒,動畫執行是勻速的(linear),動畫的播放次數是無限的。

          transform: rotateZ(0deg);意思是沿著z軸旋轉0度。

          效果

          CSS代碼:

          HTML代碼:


          主站蜘蛛池模板: 日韩在线视频一区| 亚洲av无码一区二区三区四区| 男插女高潮一区二区| 国产女人乱人伦精品一区二区 | 精品人妻少妇一区二区三区不卡| 性无码一区二区三区在线观看| 中文字幕Av一区乱码| 88国产精品视频一区二区三区| 日韩一区二区三区射精| 东京热无码一区二区三区av| 国产福利91精品一区二区三区| 制服美女视频一区| 国产香蕉一区二区在线网站| 久久一区二区三区免费| 日韩精品人妻一区二区三区四区 | 午夜福利av无码一区二区 | 国产在线步兵一区二区三区| 日韩精品无码免费一区二区三区 | 中文字幕精品一区二区| 亚洲国产精品一区二区三区久久| 国精品无码一区二区三区左线 | 亚洲AV无码一区二区三区网址 | 亚洲无删减国产精品一区| A国产一区二区免费入口| 日本丰满少妇一区二区三区| 一区二区三区精密机械| 亚州AV综合色区无码一区| 中文字幕无码一区二区免费| 精品无码人妻一区二区三区18 | 国产91精品一区| 国产在线精品一区二区三区直播| 一区二区三区免费电影| 一区二区三区在线播放视频| 国产一区二区不卡在线播放| 国内国外日产一区二区| 日韩精品无码一区二区三区不卡 | 国99精品无码一区二区三区| 99久久综合狠狠综合久久一区| 无码精品一区二区三区免费视频| 亚洲国产精品一区二区第一页 | 国产精品被窝福利一区|