函數
函數的概念:將一段常用代碼進行命名,這個名稱就叫“函數”。
函數的步驟:(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等
一個函數對應一個函數對象。
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元素的途徑
對象就是一組屬性和方法的集合。
一、創建自定義對象
(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
}
一個字符串的變量,就是一個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驗證函數。
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);
一、創建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來實現。
#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度。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。