html圖片預覽和網頁日期設置

時間  2019-12-11
標籤 html 圖片 預覽 網頁 日期 設置 欄目 HTML 简体版
原文   原文鏈接

圖片預覽，在之前的項目中常常碰見，如今整理一下，一下個人整個html頁面代碼。javascript

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" > 
 <head>      
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
 <title>本地圖片預覽</title>      
 <style type="text/css"> 
 #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;} 
 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} 
 </style> 
 <script type="text/javascript"> 
 function previewImage(file) 
 {  css

//設置圖片的最大大小
   var MAXWIDTH  = 100; 
   var MAXHEIGHT = 100; 
   var div = document.getElementById('preview'); 
   if (file.files && file.files[0]) 
   { 
     div.innerHTML = '<img id=imghead>'; 
     var img = document.getElementById('imghead'); 
     img.onload = function(){ 
       var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 
       img.width = rect.width; 
       img.height = rect.height; 
       img.style.marginLeft = rect.left+'px'; 
       img.style.marginTop = rect.top+'px'; 
     } 
     var reader = new FileReader(); 
     reader.onload = function(evt){img.src = evt.target.result;} 
     reader.readAsDataURL(file.files[0]); 
   } 
   else 
   { 
     var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 
     file.select(); 
     var src = document.selection.createRange().text; 
     div.innerHTML = '<img id=imghead>'; 
     var img = document.getElementById('imghead'); 
     img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; 
     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 
     status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); 
     div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>"; 
   } 
 } 
 function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 
     var param = {top:0, left:0, width:width, height:height}; 
     if( width>maxWidth || height>maxHeight ) 
     { 
         rateWidth = width / maxWidth; 
         rateHeight = height / maxHeight; 
          
         if( rateWidth > rateHeight ) 
         { 
             param.width =  maxWidth; 
             param.height = Math.round(height / rateWidth); 
         }else 
         { 
             param.width = Math.round(width / rateHeight); 
             param.height = maxHeight; 
         } 
     } 
      
     param.left = Math.round((maxWidth - param.width) / 2); 
     param.top = Math.round((maxHeight - param.height) / 2); 
     return param; 
 } 
 </script>      
 </head>      
 <body> 
 <div id="preview"> 
     <img id="imghead" width=100 height=100 border=0 src='../images/head01_big.jpg'>  （圖片的默認路徑）
 </div> 
     <br/>      
     <input type="file" onchange="previewImage(this)" />      
 </body>      
 </html> html

網頁上的日期設置，頁面設置很簡單，關鍵是須要一些外包（Calendar.js，Calendar.css），百度過來的，作個收藏。java

#calendar {
    width: 200px;
    border: #26FCFF 5px groove;
    text-align: center;    
}

#calendar #calendarClose {
    cursor: hand;
    cursor: pointer;
}

#calendar #calendarControler #nextMonth {
    background: url("next.gif") no-repeat;
}

#calendar #calendarControler #preMonth {
    background: url("prev.gif") no-repeat;
}

#calendar #calendarControler a:hover, #calendar #footer a:hover {
    text-decoration: underline;
}

#calendar #calendarControler input {
    border: 0px solid;
    width: 15px;
    margin: 0px;
    padding: 0px;
    cursor: hand;
    cursor: pointer;
}

#calendar #calendarHeader {
    background: #0DFCFF;
    color: #0000EF;
    font-weight: bold;
}

#calendar #calendarTB {
    width: 100%;
    table-layout: fixed;
}

#calendar .calendarDate a:hover, #calendar .calendarDate:hover, #calendar .calendarSelected {
    background: #B8FF73;
    color: #0000EF;
}

#calendar .calendarGrayDate {
    background: #ECECEC;
    color: #B9B9B9;
    cursor: default;
}

#calendar a, #yearSelecter a, #monthSelecter a {
    text-decoration: none;
    background: #F7FBFF;
    color: #0000EF;
}

#calendar a.calendarToday {
    background: #FF4040;
    color: #0000EF;
}

#calendar,#yearSelecter, #monthSelecter {
    list-style-type: none;
    position: absolute;
    padding: 0px;
    background: #F7FBFF;
    color: #080400;
    display: none;
    font-size: 12px;
    margin: 0px;
    cursor: default;
}

#monthSelecter {
    border: #26FCFF 2px solid;
    width: 40px;
    padding: 4px;
}

#yearSelecter {
    border: #26FCFF 2px solid;
}

#yearSelecter .calendarSelected, #monthSelecter .calendarSelected {
    color: #FE40FF;
    background: #F7FBFF;
}

#yearSelecter a, #monthSelecter a, #calendar .calendarDate a {
    display: block;
    cursor: default;
}

#yearSelecter a.calendarToday {
    color: #FF4040;
    background: #F7FBFF;
}

#yearSelecter a:hover, #monthSelecter a:hover {
    background: #B8FF73;
    color: #0000EF;
    font-weight: bold;
}

#yearSelecter ul {
    list-style-type: none;
    background: #F7FBFF;
    color: #0000EF;
    border: #C6DEEC 1px solid;
    float: left;
    margin-left: 1px;
    padding: 2px;
}
Calendar.css 
/***********************************************************************************************************
類名：Calendar

屬性：    
    
    
方法：
    show
    

做者： ryuken        <ryuken1982@163.com>
版本： 2.0        兼容IE與FireFox及Opera

演示          <div align="center" ><input id="kkk" onclick="Calendar.show( event );" type="text" /></div>

************************************************************************************************************/

function $(element) {
    return typeof( element ) != "string" ? element : document.getElementById( element );
}

Date.prototype.toString = function(){
    var year = this.getFullYear();
    var month = this.getMonth()+1;
    month = month > 9 ? month : "0"+month;
    var date = this.getDate() > 9 ? this.getDate() : "0"+this.getDate();    
    return year + "-" + month + "-" + date;
}

Date.prototype.equals = function(date){
    return this.getFullYear()==date.getFullYear() && this.getMonth()==date.getMonth() && this.getDate() == date.getDate();
}

var Browser = {    
    isIE     :  !!(window.attachEvent && !window.opera),
    isOpera  :  !!window.opera,
    isWebKit :  navigator.userAgent.indexOf('AppleWebKit/') > -1,
    isGecko  :  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1
};

var Position = {        
    realOffset : function(element){
        var p = { x:( element.offsetLeft || 0 ), y:( element.offsetTop || 0 ) };        
        while( element = element.offsetParent ){
            p.x += ( element.offsetLeft || 0 );            
            p.y += ( element.offsetTop || 0 );            
            if( ( Browser.isGecko || Browser.isIE ) && element.id == "calendar"  ) {
                var calendarBorderWidth = 5;
                p.x += calendarBorderWidth;
                p.y += calendarBorderWidth;
            }                
        }    
        return p;
    }
};



var Calendar = {
    today : new Date(),    
    selectedDate : new Date(),
    currentDate : new Date(),
    source : null,                                //調用日曆的控件
    
    load : function(){
        document.write( '<ul id="calendar" ><li id="calendarLi"></li></ul>' );        
        document.write( '<ul id="yearSelecter" ><li id="yearSelecterLi"></li></ul>' );
        document.write( '<ul id="monthSelecter" ></ul>' );
        
        var html = '<table id="calendarTB" border="1" cellSpacing="1" cellPadding="0">';    
        var controlerHtml = '<tr id="calendarControler"><td colspan="2"><input title="上一月" id="preMonth" type="button" onclick="Calendar.update( Calendar.currentDate.getFullYear(), Calendar.currentDate.getMonth() - 1 )"/></td>'+
                        '<td colspan="3"><a href="##" id="calendarYear"></a>&nbsp;<a href="##" id="calendarMonth"></a></td>'+
                        '<td colspan="2"><input title="下一月" id="nextMonth" type="button" onclick="Calendar.update( Calendar.currentDate.getFullYear(), Calendar.currentDate.getMonth() + 1 )"/></td></tr>';        
        
        var headerHtml = '<tr id="calendarHeader"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
        var bodyHtml = "";
        for(i=0; i<6; i++){            
            bodyHtml += "<tr>";
            for(j=0; j<7; j++){
                if( ( i*7+j )>39 ) {break;}
                if( j==0 || j==6 ) { bodyHtml += '<td class="calendarDate"><a href="##" id="date_'+ ( i*7+j ) + '" class="weekend"></a></td>';}
                else { bodyHtml += '<td class="calendarDate"><a href="##" id="date_'+ ( i*7+j ) +'" class="weekend"></a></td>'; }                                    
            }
            if( i==5 ) {break;}
            bodyHtml += "</tr>";
        }        
        bodyHtml += '<td colspan="2" id="calendarClose" title="按ESC鍵關閉">關閉</td></tr>';        
        todayHtml = '<tr><td colspan="7" id="footer"><a href="##" onclick="Calendar.selecteToday( );return false;">今天是'+this.today.getFullYear()+"年" +( this.today.getMonth()+1 ) +"月" + this.today.getDate()+'日</a></td></tr>';        
        html += controlerHtml + headerHtml + bodyHtml + todayHtml + '</table>';            
        $("calendarLi").innerHTML = html;        
        
        $("calendarYear").onclick = this.showYearSelecter;        
        $("calendarMonth").onclick = this.showMonthSelecter;        
        $("calendarClose").onclick = this.close;
        $("calendar").onclick = this.cancelBubble;
        $("yearSelecter").onclick = this.cancelBubble;
        $("monthSelecter").onclick = this.cancelBubble;        

        this.attachEvent("click", document.documentElement, this.close );
        this.attachEvent("keydown", document.documentElement, this.keyDown );    
    },
    
    update : function( yy, mm ){        
        var date = new Date( yy, mm, 1 );                    
        yy = date.getFullYear();
        mm = date.getMonth();
        Calendar.currentDate = new Date( date.getTime() );    
        $("calendarYear").innerHTML = yy + "年";        
        $("calendarMonth").innerHTML = ( mm + 1 > 9  ? ( mm + 1) : '0' + (mm + 1) ) + "月";                
        date.setDate( date.getDate() - date.getDay() - 1 );         //設爲起始日期            
        
        for( i=0; i<6; i++ ){
            for( j=0; j<7; j++ ){
                if( ( i*7+j )>39 ) {break;}
                var _date = $( "date_" + ( i*7+j ) );                                                
                _date.date = new Date( date.setDate( date.getDate() +1 ) )
                _date.innerHTML = _date.date.getDate();
                
                if(_date.date.getMonth() != mm){            
                    _date.className = "calendarGrayDate";
                }else if( _date.date.equals( Calendar.selectedDate )){                    
                    _date.className = "calendarSelected";                    
                }else if( _date.date.equals( Calendar.today ) ){
                    _date.className = "calendarToday";
                }else{
                    _date.className = ""
                }
                _date.onclick = this.selecteDate;            
            }
        }
    },
    
    //調用時參數必須爲event才能在firefox下支持
    show : function(evt){                
        evt = evt || window.event;        
        var srcElement = evt.srcElement || evt.target;         
        Calendar.source = srcElement;
        srcElement.blur();        
        
        if(window.event) {evt.cancelBubble = true;}
        else { evt.stopPropagation(); }
        
        var date = srcElement.value != "" ? Calendar.stringToDate( srcElement.value ) : new Date();
        Calendar.selectedDate = new Date( date.getTime() );    
        Calendar.update( date.getFullYear(), date.getMonth() );                
                    
        var calendar = $("calendar");    
        var p = Position.realOffset( srcElement );        
        calendar.style.left = p.x + "px";
        calendar.style.top = p.y + srcElement.offsetHeight + "px";

        calendar.style.display = "block";            
    },    
    
    showYearSelecter : function(evt){
        $("monthSelecter").style.display = "none";
        evt = evt || window.event;    
        var srcElement = evt.srcElement || evt.target;        
        
        var yearSelecter = $("yearSelecter");
        var html = '<ul>';
        var startYear = 1940;
        var endYear = startYear + 100;
        for( i=startYear; i<endYear; i++ ){                    
            html += i != startYear && i % 10 == 0 ? '</ul><ul>' : "";
            html += '<li><a href="##" onclick="Calendar.selecteYear(' + i + ', event );return false;" ' + ( Calendar.currentDate.getFullYear() == i ? 'class="calendarSelected" ' : ( Calendar.today.getFullYear() == i ? 'class= "calendarToday" ' : '' ) ) +'>' + i + '</a></li>';            
        }
        html += "</ul>";
        $("yearSelecterLi").innerHTML = html;    
        
        var p = Position.realOffset( srcElement );
        $("yearSelecter").style.left = p.x + "px";
        $("yearSelecter").style.top = p.y + srcElement.offsetHeight + "px";
        
        yearSelecter.style.display = "block";
        return false;                
    },
    
    showMonthSelecter : function(evt){
        $("yearSelecter").style.display = "none";
        evt = evt || window.event;        
        var srcElement = evt.srcElement || evt.target;        
        
        var monthSelecter = $("monthSelecter");
        var months = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
        var html = "";
        for( i=0; i<12; i++){
            if( i != Calendar.currentDate.getMonth() ){    html += '<li><a href="##" onclick="Calendar.selecteMonth( '+ i + ' , event);return false;">'+ months[i] + '月</a></li>';    }
            else{ html += '<li><a href="##" class="calendarSelected" onclick="Calendar.selecteMonth( '+ i + ' , event);return false">' + months[i] + '月</a></li>'; }
        }        
        monthSelecter.innerHTML = html;
        
        var p = Position.realOffset( srcElement );                
        $("monthSelecter").style.left = p.x + "px";
        $("monthSelecter").style.top = p.y + srcElement.offsetHeight + "px";    
    
        monthSelecter.style.display = "block";
        return false;
    },
    
    selecteToday : function(){
        Calendar.source.value = new Date();
        Calendar.selectedDate = new Date();    
        Calendar.close();        
    },    
    
    selecteYear : function( year, evt ){    
        evt = evt || window.event;
        var srcElement = evt.srcElement || evt.target;    
        Calendar.update( year, Calendar.currentDate.getMonth() );        
        $("yearSelecter").style.display = "none";        
    },
    
    selecteMonth : function( month, evt ){    
        evt = evt || window.event;
        var srcElement = evt.srcElement || evt.target;;        
        Calendar.update( Calendar.currentDate.getFullYear(), month );        
        $("monthSelecter").style.display = "none";
    },
    
    selecteDate : function(evt){
        evt = evt || window.event;
        var srcElement = evt.srcElement || evt.target;;
        Calendar.source.value = srcElement.date;
        Calendar.selectedDate = new Date( srcElement.date.getTime() );
        Calendar.close();
        return false;
    },
    
    attachEvent : function(type, target, handler, owner){        
        var eventHandler = handler;
        if(owner){    
            eventHandler = function(e){
                             handler.call(owner, e);
                          }
        }
        if(window.document.all) { target.attachEvent("on"+type, eventHandler ); }
        else { target.addEventListener(type, eventHandler, false); }
    },
    
    close : function(){                
        $("calendar").style.display = "none" ;
        $("yearSelecter").style.display = "none";
        $("monthSelecter").style.display = "none";
    },
    
    keyDown : function(evt){
        evt = evt || wiondw.event;
        if(evt.keyCode != 27) return;
        if( $("monthSelecter").style.display != "none" ) $("monthSelecter").style.display = "none";
        else if( $("yearSelecter").style.display != "none" ) $("yearSelecter").style.display = "none";
        else if( $("calendar").style.display != "none" ) $("calendar").style.display = "none";
    },    
    
    stringToDate : function( strDate ){        
        strDate = strDate.split( "-" );            
        var date = new Date( strDate[0], strDate[1] - 1, strDate[2] );        
        return date;
    },

    cancelBubble : function(evt){
        evt = evt ? evt : window.event;
        if(window.event) {evt.cancelBubble = true;}
        else { evt.stopPropagation(); }
    }    
}
Calendar.load();
Calendar.js

在js中要用到兩張圖片，（next.gif）和（prev.gif）。jsp

 jsp頁面代碼：ide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript Calendar</title>ui

<link href="calendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Calendar.js"></script>this

</head>
<body>url

<div align="center" ><input onclick="Calendar.show( event );" type="text" /></div>spa

</body>

</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程