Blog

JS获取当前年份、时间

今天研究了下关于如何用JS获取系统当前的年份,目的是解决网页下标“CopyRight 2000-2015”年份自动更新的问题。

代码如下:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
CopyRight&copy;2006-<span id="copy"></span>
<script>
    var copyright=new Date().getFullYear();
    document.getElementById( "copy" ).innerHTML = copyright;
</script>
</body>
</html>

通过查资料总结了以下JS关于获取时间的方法:

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

=>-----------以下为原文章的一些内容-----------<=

日期时间脚本库方法列表

Date.prototype.isLeapYear 判断闰年
Date.prototype.Format 日期格式化
Date.prototype.DateAdd 日期计算
Date.prototype.DateDiff 比较日期差
Date.prototype.toString 日期转字符串
Date.prototype.toArray 日期分割为数组
Date.prototype.DatePart 取日期的部分信息
Date.prototype.MaxDayOfDate 取日期所在月的最大天数
Date.prototype.WeekNumOfYear 判断日期所在年的第几周
StringToDate 字符串转日期型
IsValidDate 验证日期有效性
CheckDateTime 完整日期时间检查
daysBetween 日期天数差

js代码:

//---------------------------------------------------  
// 判断闰年  
//---------------------------------------------------  
Date.prototype.isLeapYear = function()   
{   
    return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));   
}   
  
//---------------------------------------------------  
// 日期格式化  
// 格式 YYYY/yyyy/YY/yy 表示年份  
// MM/M 月份  
// W/w 星期  
// dd/DD/d/D 日期  
// hh/HH/h/H 时间  
// mm/m 分钟  
// ss/SS/s/S 秒  
//---------------------------------------------------  
Date.prototype.Format = function(formatStr)   
{   
    var str = formatStr;   
    var Week = ['日','一','二','三','四','五','六'];  
  
    str=str.replace(/yyyy|YYYY/,this.getFullYear());   
    str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));   
  
    str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());   
    str=str.replace(/M/g,this.getMonth());   
  
    str=str.replace(/w|W/g,Week[this.getDay()]);   
  
    str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());   
    str=str.replace(/d|D/g,this.getDate());   
  
    str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());   
    str=str.replace(/h|H/g,this.getHours());   
    str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());   
    str=str.replace(/m/g,this.getMinutes());   
  
    str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());   
    str=str.replace(/s|S/g,this.getSeconds());   
  
    return str;   
}   
  
//+---------------------------------------------------  
//| 求两个时间的天数差 日期格式为 YYYY-MM-dd   
//+---------------------------------------------------  
function daysBetween(DateOne,DateTwo)  
{   
    var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));  
    var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);  
    var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));  
  
    var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));  
    var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);  
    var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));  
  
    var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);   
    return Math.abs(cha);  
}  
  
  
//+---------------------------------------------------  
//| 日期计算  
//+---------------------------------------------------  
Date.prototype.DateAdd = function(strInterval, Number) {   
    var dtTmp = this;  
    switch (strInterval) {   
        case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));  
        case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));  
        case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));  
        case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));  
        case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));  
        case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());  
        case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());  
        case 'y' :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());  
    }  
}  
  
//+---------------------------------------------------  
//| 比较日期差 dtEnd 格式为日期型或者 有效日期格式字符串  
//+---------------------------------------------------  
Date.prototype.DateDiff = function(strInterval, dtEnd) {   
    var dtStart = this;  
    if (typeof dtEnd == 'string' )//如果是字符串转换为日期型  
    {   
        dtEnd = StringToDate(dtEnd);  
    }  
    switch (strInterval) {   
        case 's' :return parseInt((dtEnd - dtStart) / 1000);  
        case 'n' :return parseInt((dtEnd - dtStart) / 60000);  
        case 'h' :return parseInt((dtEnd - dtStart) / 3600000);  
        case 'd' :return parseInt((dtEnd - dtStart) / 86400000);  
        case 'w' :return parseInt((dtEnd - dtStart) / (86400000 * 7));  
        case 'm' :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);  
        case 'y' :return dtEnd.getFullYear() - dtStart.getFullYear();  
    }  
}  
  
//+---------------------------------------------------  
//| 日期输出字符串,重载了系统的toString方法  
//+---------------------------------------------------  
Date.prototype.toString = function(showWeek)  
{   
    var myDate= this;  
    var str = myDate.toLocaleDateString();  
    if (showWeek)  
    {   
        var Week = ['日','一','二','三','四','五','六'];  
        str += ' 星期' + Week[myDate.getDay()];  
    }  
    return str;  
}  
  
//+---------------------------------------------------  
//| 日期合法性验证  
//| 格式为:YYYY-MM-DD或YYYY/MM/DD  
//+---------------------------------------------------  
function IsValidDate(DateStr)   
{   
    var sDate=DateStr.replace(/(^s+|s+$)/g,''); //去两边空格;   
    if(sDate=='') return true;   
    //如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为''   
    //数据库中,合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式   
    var s = sDate.replace(/[d]{ 4,4 }[-/]{ 1 }[d]{ 1,2 }[-/]{ 1 }[d]{ 1,2 }/g,'');   
    if (s=='') //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D   
    {   
        var t=new Date(sDate.replace(/-/g,'/'));   
        var ar = sDate.split(/[-/:]/);   
        if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())   
        {   
            //alert('错误的日期格式!格式为:YYYY-MM-DD或YYYY/MM/DD。注意闰年。');   
            return false;   
        }   
    }   
    else   
    {   
        //alert('错误的日期格式!格式为:YYYY-MM-DD或YYYY/MM/DD。注意闰年。');   
        return false;   
    }   
    return true;   
}   
  
//+---------------------------------------------------  
//| 日期时间检查  
//| 格式为:YYYY-MM-DD HH:MM:SS  
//+---------------------------------------------------  
function CheckDateTime(str)  
{   
    var reg = /^(d+)-(d{ 1,2 })-(d{ 1,2 }) (d{ 1,2 }):(d{ 1,2 }):(d{ 1,2 })$/;   
    var r = str.match(reg);   
    if(r==null)return false;   
    r[2]=r[2]-1;   
    var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);   
    if(d.getFullYear()!=r[1])return false;   
    if(d.getMonth()!=r[2])return false;   
    if(d.getDate()!=r[3])return false;   
    if(d.getHours()!=r[4])return false;   
    if(d.getMinutes()!=r[5])return false;   
    if(d.getSeconds()!=r[6])return false;   
    return true;   
}   
  
//+---------------------------------------------------  
//| 把日期分割成数组  
//+---------------------------------------------------  
Date.prototype.toArray = function()  
{   
    var myDate = this;  
    var myArray = Array();  
    myArray[0] = myDate.getFullYear();  
    myArray[1] = myDate.getMonth();  
    myArray[2] = myDate.getDate();  
    myArray[3] = myDate.getHours();  
    myArray[4] = myDate.getMinutes();  
    myArray[5] = myDate.getSeconds();  
    return myArray;  
}  
  
//+---------------------------------------------------  
//| 取得日期数据信息  
//| 参数 interval 表示数据类型  
//| y 年 m月 d日 w星期 ww周 h时 n分 s秒  
//+---------------------------------------------------  
Date.prototype.DatePart = function(interval)  
{   
    var myDate = this;  
    var partStr='';  
    var Week = ['日','一','二','三','四','五','六'];  
    switch (interval)  
    {   
        case 'y' :partStr = myDate.getFullYear();break;  
        case 'm' :partStr = myDate.getMonth()+1;break;  
        case 'd' :partStr = myDate.getDate();break;  
        case 'w' :partStr = Week[myDate.getDay()];break;  
        case 'ww' :partStr = myDate.WeekNumOfYear();break;  
        case 'h' :partStr = myDate.getHours();break;  
        case 'n' :partStr = myDate.getMinutes();break;  
        case 's' :partStr = myDate.getSeconds();break;  
    }  
    return partStr;  
}  
  
//+---------------------------------------------------  
//| 取得当前日期所在月的最大天数  
//+---------------------------------------------------  
Date.prototype.MaxDayOfDate = function()  
{   
    var myDate = this;  
    var ary = myDate.toArray();  
    var date1 = (new Date(ary[0],ary[1]+1,1));  
    var date2 = date1.dateAdd(1,'m',1);  
    var result = dateDiff(date1.Format('yyyy-MM-dd'),date2.Format('yyyy-MM-dd'));  
    return result;  
}  
  
//+---------------------------------------------------  
//| 取得当前日期所在周是一年中的第几周  
//+---------------------------------------------------  
Date.prototype.WeekNumOfYear = function()  
{   
    var myDate = this;  
    var ary = myDate.toArray();  
    var year = ary[0];  
    var month = ary[1]+1;  
    var day = ary[2];  
    document.write('< script language=VBScript> ');  
    document.write('myDate = DateValue(''+month+'-'+day+'-'+year+'') ');  
    document.write('result = DatePart('ww', myDate) ');  
    document.write(' ');  
    return result;  
}  
  
//+---------------------------------------------------  
//| 字符串转成日期类型   
//| 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd  
//+---------------------------------------------------  
function StringToDate(DateStr)  
{   
  
    var converted = Date.parse(DateStr);  
    var myDate = new Date(converted);  
    if (isNaN(myDate))  
    {   
        //var delimCahar = DateStr.indexOf('/')!=-1?'/':'-';  
        var arys= DateStr.split('-');  
        myDate = new Date(arys[0],--arys[1],arys[2]);  
    }  
    return myDate;  

 
//今天

 function countDay(){
    
    myDate = new Date();
    var todadys= myDate.getFullYear()+'-'+(parseInt(myDate.getMonth())+1)+'-'+myDate.getDate()+' 00:00:00';
    var todadye= myDate.getFullYear()+'-'+(parseInt(myDate.getMonth())+1)+'-'+myDate.getDate()+' 23:59:59';
    
    ...
    
    
    }

//本月

 function countMonth(){

var d  = new  Date();   
d =  new  Date(d.getFullYear(),d.getMonth()+1,0); 
        
     var months= myDate.getFullYear()+'-'+(parseInt(myDate.getMonth())+1)+'-'+'01 00:00:00';
     var monthe= myDate.getFullYear()+'-'+(parseInt(myDate.getMonth())+1)+'-'+d.getDate()+' 23:59:59';

...

}

HTML DOM Event 对象

今天在整理公司网页的的时候看到了onBlur onKeyUp事件,便查资料学习了下HTML DOM Event 对象

总结了几个常用的event对象

1.onclick 

     最常用的,onclick 事件会在对象被点击时发生。当点击时执行某个函数。

 例如: 

<html>
<body>

Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>

</body>
</html>

2.onblur

    onblur 事件会在对象失去焦点时发生。

例如:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onblur="tc()"/>
<script>
    function tc(){
        alert("Hello");
    }
</script>
</body>
</html>

3.onerror

 

onerror 事件会在文档或图像加载过程中发生错误时被触发。

在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。

例如:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="abc.JPG" onerror="this.src='default.JPG'" />
</body>
</html>

4.onchange

onchange 事件会在域的内容改变时发生。

<html>

<head>
<script type="text/javascript">
function upperCase()
{
alert("hello")
}
</script>
</head>

<body>

Enter your name: <input type="text" id="fname" onchange="upperCase()">

</body>
</html>

5.onfocus

onfocus 事件在对象获得焦点时发生

<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
function setStyle1(x)
{
document.getElementById(x).style.background="#FFF"
}

</script>
<style>
#fname:hover{
background-color:red;
}
</style>
</head>
<body>

First name: <input type="text" onfocus="setStyle(this.id)" onblur="setStyle1(this.id)" id="fname">
<br />
Last name: <input type="text" onfocus="setStyle(this.id)" id="lname">

</body>
</html>

6.onsubmit

onsubmit 事件会在表单中的确认按钮被点击时发生。

<html>

<body>

<h1>What is your name?</h1>
<form name="testform" action="/example/hdom/hdom_onsubmit.html"
onSubmit="alert('Hello ' + testform.inputfield.value +'!')">
<input type="text" name="inputfield" size="20">
<input type="submit" value="Submit">
</form>

</body>

</html>

 

 

readonly

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

背景色渐变

background: -webkit-gradient(linear, 0 10%,80% 10%, from(#FFFF99), to(#99CC99));
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#999));

初始canvas

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title></title>

    <style>
        #canvas2,#canvas3{
        
            background:#000
        }
        canvas{border:1px solid black}
    
    </style>
  </head>
  <body>
      <canvas id="canvas2">
    </canvas>
    <canvas id="canvas3">
    </canvas>
    <canvas id="canvas4">
    </canvas>
    <canvas id="canvas5">
    </canvas>
    <canvas id="canvas6">
    </canvas>
    <canvas id="canvas7">
    </canvas>
    <canvas id="canvas8">
    </canvas>
    <canvas id="canvas9">
    </canvas>
    <canvas id="canvas10">
    </canvas>
    <canvas id="canvas11">
    </canvas>
    <canvas id="canvas12">
    </canvas>
    <canvas id="canvas13">
    </canvas>
    <canvas id="canvas14">
    </canvas>
    <canvas id="canvas15">
    </canvas>
    <canvas id="canvas16">
    </canvas>
    <canvas id="canvas17">
    </canvas>
    <canvas id="canvas18">
    </canvas>
    
  </body>
  <script>
  //2
    var b =document.getElementById("canvas2");
    var bxt = b.getContext("2d");//在画布上绘图的环境 当前只有2d
    var jbsb= bxt.createLinearGradient(0,0,0,170);//创建线性渐变 渐变方向自上向下   (0,0,170,0);渐变方向是自左向右
        /*.createLinearGradient(渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标);
          .createRadialGradient(75,50,5,90,60,100)放射状/圆形渐变,
          数值分别为  渐变的开始圆的 x 坐标,渐变的开始圆的 y 坐标,开始圆的半径,渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径
        */
        jbsb.addColorStop(0,"black");
        jbsb.addColorStop(0.5,"white");//中间可以加多个颜色
        jbsb.addColorStop(1,"red");
    bxt.shadowBlur=50;//阴影大小
    bxt.shadowColor="#FFF";//阴影颜色
    bxt.fillStyle=jbsb;
    bxt.fillRect(0,0,100,100);//绘制“已填色”的矩形。默认的填充颜色是黑色
    
    bxt.strokeStyle="#b5ffb5";//=jbsb 也可用渐变色   笔触
    bxt.lineWidth=1;//笔触的宽度
    bxt.strokeRect(20,20,90,100);
    bxt.font="30px Verdana";//先定义字的大小和字体
    bxt.strokeText("HELLO",0,50);//字的内容和位置

  //3
    var c = document.getElementById("canvas3");
    var cxt = c.getContext("2d");
    cxt.fillStyle="#c0c0c0";
    cxt.fillRect(0,0,100,100);
    cxt.clearRect(20,20,10,50);//清除指定区域的颜色
   //4
    var d = document.getElementById("canvas4");
    var dxt = d.getContext("2d");
    dxt.shadowBlur=40;//阴影模糊级数(我理解为大小)
    dxt.shadowColor="#000";//阴影颜色
    dxt.shadowOffsetX=20;//阴影距离X轴20像素,不加则居中
    dxt.shadowOffsetY=20;//阴影距离Y轴20像素,不加则居中
    dxt.fillStyle="#c0c0c0";
    dxt.fillRect(20,20,100,100);
    //5
    var e = document.getElementById("canvas5");
    var ext = e.getContext("2d");
    ext.beginPath();
    ext.lineWidth=10;
    ext.lineCap="butt";//lineCap 属性设置或返回线条末端线帽的样式。 默认。向线条的每个末端添加平直的边缘。
    ext.moveTo(20,20);
    ext.lineTo(200,20);
    ext.stroke();

    ext.beginPath();
    ext.lineCap="round";//向线条的每个末端添加圆形线帽。
    ext.moveTo(20,40);
    ext.lineTo(200,40);
    ext.stroke();

    ext.beginPath();
    ext.lineCap="square";//向线条的每个末端添加正方形线帽。
    ext.moveTo(20,60);
    ext.lineTo(200,60);
    ext.stroke();
    //6
    var f=document.getElementById("canvas6");
    var fxt=f.getContext("2d");
    fxt.lineWidth="20";
    fxt.beginPath();
    fxt.lineJoin="round";//lineJoin属性设置或返回所创建边角的类型,当两条线交汇时  值为默认miter为尖角  bevel为平角
    /* miterLimit=5;*/
    fxt.moveTo(0,0);
    fxt.lineTo(100,50);
    fxt.lineTo(20,100);
    fxt.stroke();
    //7
    var g=document.getElementById("canvas7");
    var gxt=g.getContext("2d");
    gxt.rect(0,0,100,100);//绘制一个正方形
    gxt.stroke();
    gxt.strokeStyle="red";
    gxt.rect(30,30,100,100);//绘制一个正方形
    gxt.stroke();
     //8
    var h = document.getElementById("canvas8");
    var hxt = h.getContext("2d");
    hxt.beginPath();
    hxt.lineWidth="5";
    hxt.strokeStyle="red"; // 红色路径
    hxt.moveTo(0,75);
    hxt.lineTo(250,75);
    hxt.stroke(); // 进行绘制

    hxt.beginPath();//重置当前的路径。
    hxt.strokeStyle="blue"; // 蓝色路径
    hxt.moveTo(50,0);
    hxt.lineTo(150,130);
    hxt.stroke(); // 进行绘制
//9
    var i = document.getElementById("canvas9");
    var ixt = i.getContext("2d");
    ixt.beginPath();
    ixt.lineWidth=10;
    ixt.moveTo(10,10);
    ixt.lineTo(50,50);
    ixt.lineTo(80,10);//添加一个新点,然后在画布中创建从该点到最后指定点的线条
    ixt.closePath();//方法创建从当前点到开始点的路径。
    ixt.stroke();
    ixt.fillStyle="green";
    ixt.fill();
//10
    var j = document.getElementById("canvas10");
    var jxt = j.getContext("2d");
    jxt.beginPath();
    jxt.moveTo(0,0);
    jxt.quadraticCurveTo(20,100,100,20);//通过使用表示*二次贝塞尔*曲线的指定控制点,向当前路径添加一个点 (我理解为先到20,100的点,然后到100,20的点,中间有个过度)
    jxt.stroke();
//11
    var k = document.getElementById("canvas11");
    var kxt = k.getContext("2d");
    kxt.beginPath();
    kxt.moveTo(0,0);
    kxt.bezierCurveTo(20,100,200,100,20,20);//通过使用表示*三次贝塞尔*曲线的指定控制点,向当前路径添加一个点 (我理解为先到20,100的点,再到200,100,的点,最后到20,20的点,中间有个过度)
    kxt.stroke();
//12
    var l=document.getElementById("canvas12");
    var lxt= l.getContext("2d");
    lxt.beginPath();
    lxt.arc(100,75,50,0,2*Math.PI);//绘制圆或者部分圆,(100,75,50,0,2*Math.PI)   100,75是指圆心的位置
    lxt.stroke();
//13
    var m=document.getElementById("canvas13");
    var mxt=m.getContext("2d");
    mxt.beginPath();
    mxt.moveTo(20,20);           // 创建开始点
    mxt.lineTo(100,20);          // 创建水平线
    mxt.arcTo(150,20,150,70,50); // 创建弧   数值分别为 弧的起点的 x 坐标 弧的起点的 y 坐标 弧的终点的 x 坐标    弧的终点的 y 坐标 弧的半径
    mxt.lineTo(150,120);         // 创建垂直线
    mxt.stroke();                // 进行绘制
//14    
    var n=document.getElementById("canvas14");
    var nxt=n.getContext("2d");
    nxt.beginPath();
    nxt.rect(20,20,150,100);
    if (nxt.isPointInPath(20,50))//此判断的意思是,如果20 50这个点在当前路径中,则画出矩形nxt (20,50)在当前路径中所以能绘出,(0,0)点不在,所以就不绘
        {
        nxt.stroke();
        };
//15
    var o=document.getElementById("canvas15");
    var oxt=o.getContext("2d");
    oxt.beginPath();
    oxt.strokeRect(20,20,20,20);
    oxt.scale(2,2);
    oxt.rotate(20*Math.PI/180);//以下的矩形旋转20度
    oxt.strokeRect(20,20,20,20);
    oxt.scale(0.2,0.2);
    oxt.strokeRect(20,20,20,20);
//16
    var p=document.getElementById("canvas16");
    var ptx=p.getContext("2d");
    ptx.fillRect(10,10,100,50);
    ptx.translate(70,70);//在70,70的位置复制一个矩形
    ptx.fillRect(10,10,10,50);
//17
    var q=document.getElementById("canvas17");
    var qtx=q.getContext("2d");

    qtx.fillStyle="yellow";
    qtx.fillRect(0,0,250,100)

    qtx.transform(1,0.5,-0.5,1,30,10);//数字的含义 水平缩放绘图  水平倾斜绘图 垂直倾斜绘图 垂直缩放绘图 水平移动绘图 垂直移动绘图
    qtx.fillStyle="red";
    qtx.fillRect(0,0,250,100);

    qtx.transform(1,0.5,-0.5,1,30,10);
    qtx.fillStyle="blue";
    qtx.fillRect(0,0,250,100);
//18
    var r=document.getElementById("canvas18");
    var rxt=r.getContext("2d");
    var jbsr= rxt.createLinearGradient(0,0,200,0);//创建线性渐变 渐变方向自上向下   (0,0,170,0);渐变方向是自左向右
        /*.createLinearGradient(渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标);
          .createRadialGradient(75,50,5,90,60,100)放射状/圆形渐变,
          数值分别为  渐变的开始圆的 x 坐标,渐变的开始圆的 y 坐标,开始圆的半径,渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径
        */
        jbsr.addColorStop(0,"#006633");
        jbsr.addColorStop(0.5,"#FFFF99");//中间可以加多个颜色
        jbsr.addColorStop(1,"#990033");
    var jbsr1= rxt.createRadialGradient(75,50,5,90,60,100);//创建线性渐变 渐变方向自上向下   (0,0,170,0);渐变方向是自左向右
        /*.createLinearGradient(渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标);
          .createRadialGradient(75,50,5,90,60,100)放射状/圆形渐变,
          数值分别为  渐变的开始圆的 x 坐标,渐变的开始圆的 y 坐标,开始圆的半径,渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径
        */
        jbsr1.addColorStop(0,"#006633");
        jbsr1.addColorStop(0.5,"#FFFF99");//中间可以加多个颜色
        jbsr1.addColorStop(1,"#990033");
        rxt.shadowBlur=10;//阴影模糊级数(我理解模糊的程度大小)
    rxt.shadowColor="#c0c0c0";//阴影颜色
    rxt.shadowOffsetX=5;//阴影距离X轴20像素,不加则居中
    rxt.shadowOffsetY=5;//阴影距离Y轴20像素,不加则居中
    rxt.font="40px  Verdana";
    rxt.lineWidth=2;
    rxt.strokeStyle=jbsr;
    rxt.strokeText("HELLO",50,50);
    rxt.fillStyle=jbsr1;
    rxt.fillText("WORLD",50,100); 
  </script>
</html>

 

练手纯css 绘制简易小黄人

演示地址

源代码如下:

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="body">
        <div class="bar">
            <div class="glass-border fl">
                <div class="glass">
                    <div class="eye">
                        <div class="pupil"></div>
                    </div>
                </div>
            </div>
            <div class="glass-border fl">
                <div class="glass">
                    <div class="eye">
                        <div class="pupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mouth">
            <div class="touth-l fl"></div>
            <div class="touth-m fl"></div>
            <div class="touth-m fl"></div>
            <div class="touth-r fl"></div>
            <div class="touth-b-l"></div>
            <div class="touth-b-r fl"></div>
        </div>
        <div class="bar-left">
            <div class="button"></div>
        </div>

        <div class="bar-right">
            <div class="button1"></div>
        </div>
        <div class="f">
            <div class="line"></div>
        </div>
        <div class="b">
            <div class="bag">
                <div class="acr">
                    <div class="logo"></div>
                </div>
            </div>
        </div>
        <div class="leg-l fl">
        </div>
        <div class="leg-r fl">
        </div>
        <div class="show-l fl">
            </div>
        <div class="show-r fl">
        </div>
        <div class="cover"></div>
        <div class="cover1"></div>
        <div class="arm-l">
            <div class="hand-l"></div>
        </div>
        <div class="arm-r">
            <div class="hand-r"></div>
        </div>
    </div>
</body>
</html>

2.style.css

.fl{
    float: left;
}
.body{
    width:230px;
    height: 410px;
    background: #fff500;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
    margin: auto auto;
}
.bar{
    height: 20px;
    width: 230px;
    background: #000;
    position: relative;
    top: 110px;
}
.glass-border{
    width: 100px;
    height: 100px;
    background: #dededd;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px ;
    border: 2px solid #7a7675;
    position: relative;
    top: -50px;
    left: 10px;
}
.glass{
    width: 80px;
    height: 80px;
    background: #FFF;
    border-radius: 50px;
    border: 2px solid #7a7675;
    margin: 0px auto;
    position: relative;
    top: 8px;
}
.eye{
    width: 25px;
    height: 25px;
    background: #8e5343;
    border-radius: 50px;
    position: relative;
    top: 24px;

}
.pupil{
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50px;
    margin: 0px auto;
    position: relative;
    top: 6px;
}
.mouth{
    width: 100px;
    height: 30px;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    background: #311d1b;
    margin: 0px auto;
    position: relative;
    top: 170px;
}
.touth-l,
.touth-m,
.touth-r,
.touth-b-l,
.touth-b-r{
    width: 20px;
    height: 14px;
    background: #FFFFFF;
    position: relative;
    top: -84px;
    left: 7px;
}
.touth-m{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.touth-l{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 6px;
}
.touth-r{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 10px;
}
.touth-b-l{
     clear: both;
     float: left;
    height: 11px;
     position: relative;
     left: 30px;
    margin-top: 5px ;
    border-top-left-radius: 10px;
    border-top-right-radius: 6px;
 }
.touth-b-r{
    position: relative;
    height: 11px;
    left: 31px;
    margin-top: 5px ;
    border-top-left-radius: 6px;
    border-top-right-radius: 10px;
}
.bar-right,.bar-left{
    height: 20px;
    width: 80px;
    background: #6579b2;
    z-index: 1;
    border: 1px solid #434651;
}
.bar-left{
    position: relative;
    top: 200px;
    left: -10px;
    transform: rotate(40deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}
.bar-right{
    position: relative;
    top: 180px;left: 160px;
    transform: rotate(300deg);
    -webkit-transform: rotate(340deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);

}
.button{
    width: 10px;
    height: 10px;
    background: #1e1815;
    position: relative;
    top: 5px;
    left: 66px;
    border-radius: 50px;

}
.button1{
    width: 10px;
    height: 10px;
    background: #1e1815;
    position: relative;
    top: 5px;
    left: 3px;
    border-radius: 50px;

}
.f{
    width: 145px;
    height: 75px;
    background: #6579b2;
    position: relative;
    margin: 0 auto;
    top: 170px;

}
.line {
    width: 100px;
    height: 100px;
    border-bottom: 1px solid #434651;
    border-radius: 30px;
    position: relative;
    top: -70px;
    left: 20px;
}
.b{
    width: 228px;
    height: 74px;
    background: #6579b2;
    position: relative;
    top: 170px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom: 1px solid #434651;
}
.bag{
    width: 45px;
    height: 50px;
    border: 1px solid #434651;
    position: relative;
    margin: 0 auto;
    top: -30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
.acr{
    width: 25px;
    height: 25px;
    background: #434651;
    border-radius: 50px;
    position: relative;
    margin: 0px auto;
    top: 10px;
}
.logo{
    width: 10px;
    height: 10px;
    border: 3px solid #6579b2;
    margin: 0px auto;
    position: relative;
    top: 4px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}
.leg-l,.leg-r{
    width: 40px;
    height: 45px;
    background: #6579b2;
    margin: 0px auto;
    position: relative;
    top: 170px;
    left: 70px;
}
.leg-l{


}
.leg-r{

    position: relative;
    left: 80px;
}
.show-l,.show-r{
    width: 55px;
    height: 35px;
    background: #000;
    border-radius: 50px;
}
.show-l{
    position: relative;
    top: 210px;
    left: -20px ;
}
.show-r{
    position: relative;
    top: 210px;
    left: -20px;
}
.cover{
    height: 25px;
    width: 15px;
    background: #FFFFFF;
    margin: 0 auto;
    position: relative;
    top: -8px;
    left: -123px;
    z-index: 1;
}
.cover1{
    height: 25px;
    width: 15px;
    background: #FFF;
    margin: 0 auto;
    position: relative;
    top: -30px;
    left: 123px;
    z-index: 1;
}
.arm-l,
.arm-r{
    height: 100px;
    width: 20px;
    background: #fff500;
    margin: 0px auto;
}
.arm-l{
     transform: rotate(30deg);
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(60deg);
     -o-transform: rotate(60deg);
     position: relative;
     top: -30px;
     left: -130px;
 }
.arm-r{
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    position: relative;
    top: -130px;
    left: 82px;
}
.hand-l,.hand-r{
    width: 40px;
    height: 30px;
    background: #000;
    border-radius: 50px;
    position: relative;
    left: -10px;
    top: 100px;
}


Jane Doe
Web Designer
Jane Doe
Web Designer