鮪魚的程式筆記和雜七雜八

2018年8月1日星期三

解決瀏覽器暫存網頁無法自動更新css檔案問題

瀏覽器暫存會讓網站的css檔案無法即時更新，雖然強制重整就能解決但如果用手機觀看除非清除資料不然只能等暫存更新時間才能更新，為了讓客戶可以即時看到修改乾脆在css檔案的路徑後方加上亂數，這樣瀏覽器就會以為是不同檔案重抓css了

.net vb
<link href="Style.css?v=<%=now()%>" rel="stylesheet" type="text/css">

懶得建立亂數乾脆用當下時間了，缺點是使用者會一直下載Cache檔案 XDDD

2018年6月14日星期四

IIS7.5 , 8版本檔案上傳限制、時間處理(上傳檔案後出現404)

伺服器更新後用IIS7.5版本發現客戶上傳檔案時會跑出404錯誤，找了一下文章大部分都說加入下面這串就可以解決

但實際加上後發現因為位置或原本的設置很容易出現 500 - Internal server error. 的錯誤，後來終於找到從IIS直接設定的方法，步驟如下：

1.先到IIS選取要設定網站後進入設定編輯器

2.設置上傳超時時間限制：

點擊下拉選單，選system.web>httpRuntime

將executionTimeout的值設為00:30:00(30分鐘)

3.設置上傳文件大小限制：

點擊下拉選單，選system.webServer>security>requestFiltering

展開requestlimits，將maxAllowedContentLength的值設為102400000(即100MB，可設定更大，最大印象中是4GB)

修改後就會生效，不需重啟IIS。

如果需要圖文說明可以到下方參考連結看

參考連結

https://jingyan.baidu.com/article/624e74594c678e34e8ba5aff.html

2017年12月6日星期三

[VB]將讀出的資料去除HTML標籤方法

利用客戶輸入的資料來當fb的描述時發現必須把html標籤去除...

網路上找到了個function不錯用，紀錄一下

Public Function splitHTML(ByVal Html As String) As String
Dim split As String = Html
Dim Regex As New System.Text.RegularExpressions.Regex("<[^>]+>|]+>")
split = Regex.Replace(split, "")
Return split
End Function

來源：https://dotblogs.com.tw/joysdw12/2010/11/11/19379

2016年10月11日星期二

CORDOVA打包APP的cookie問題

用cordova打包html+js成APP時發現android不能存取cookie..找到下面文章參考解決

該檔案位置似乎版本不同不一定在那？

我的位置是在專案底下的"\platforms\android\src\io\cordova"裡面有個資料夾打開就會看到。

另外要注意的是修改好該檔案後存檔完記得關閉，不然再打包途中會出現說該檔案已修改..之後打包出來的APP會有些BUG跟問題...

用jquery的cookie也適用此方法。

參考網址：http://aubreyhsu.blogspot.tw/2015/05/documentcookie-dont-work-in-android.html

在利用cordova打包html和js時，發現document.cookie竟然寫不進手機裡，查資料才知道在android 3.1以上需要打開cookie寫入，操作如下：

1、打開專案底下的「\platforms\android\src\com\example\MainActivity.java」：

2、先「import android.webkit.CookieManager;」，

3、在 onCreate function裡面「CookieManager.setAcceptFileSchemeCookies(true);」

範例如下：

import android.os.Bundle;

import android.webkit.CookieManager;

import org.apache.cordova.*;

public class MainActivity extends CordovaActivity

{

@Override

public void onCreate(Bundle savedInstanceState)

{

CookieManager.setAcceptFileSchemeCookies(true);

super.onCreate(savedInstanceState);

// Set by <content src="index.html" /> in config.xml

loadUrl(launchUrl);

}

2016年9月22日星期四

建立給apk使用的金鑰

公司需求開始開發app的東西..做了apk之後安裝發現得產生金鑰來使用..所以找了些文章參考..

大概整理一下如下：
以下資料參考來源：https://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/　

Generate a private key

To sign your app, create a keystore. A keystore is a binary file that contains a set of private keys. Here's how you create one.

Open a Command Prompt in administrator mode.
In the Command Prompt, change directories to the %JAVA_HOME%\bin folder.

(For example: C:\Program Files (x86)\Java\jdk1.7.0_55\bin).
In the Command Prompt, run the following command.
```
keytool -genkey -v -keystore c:\my-release-key.keystore -alias johnS
-keyalg RSA -keysize 2048 -validity 10000
```
Replace my-release-key.keystore and johnS with names that make sense to you.

You'll be asked to provide a password and the Distinguished Name fields for your key.

This series of responses gives you an idea of the kinds of information you'll provide for each prompt. Like in the previous command, respond to each prompt with information that makes sense for your app.

Enter keystore password: pwd123
Re-enter new password: pwd123
What is your first and last name?
[Unknown]= John Smith
What is the name of your organizational unit?
[Unknown]= ABC
What is the name of your organization?
[Unknown]= XYZ
What is the name of your of your City or Locality?
[Unknown]= Redmond
What is the name of your State or Province?
[Unknown]= WA
What is the two-letter country code for this unit?
[Unknown]= US
Is CN=John Smith, OU=ABC, O=XYZ, L=Redmond, ST=WA, C=US correct??
[no]=  y

After you provide this information, output like this appears in the Command Prompt.

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA)
with a validity of 10,000 days for: CN= John Smith, OU= ABC, O= XYZ,
L=Redmond, ST=WA, C=US

Enter key password for <johnS>
    (RETURN if same as keystore password):

The Android SDK generates the keystore as a file named my-release-key.keystore and places that file in the C:\ drive. The keystore contains a single key, valid for 10000 days.

If you want more detail about this process, see the Android developer documentation here:Signing your applications

照以上步驟後會產生一個key在你指定的位置，之後到apk原碼的資料夾中應該有一個build.json的檔案，打開後把裡面分別照自己設定的填入，照上方範例的話就是

{
 "android": {
     "release": {
         "keystore":"c:\\my-release-key.keystore",
         "storePassword":"pwd123",
         "alias":"johnS",
         "password":"pwd123",
         "keystoreType":""
       }
   }
}

之後打包後安裝就沒金鑰問題了。

2016年5月16日星期一

CheckBox全選或全不選

找看看如何實作核選方塊的全選與全取消功能時剛好翻到這方法，很簡單就能處理。

原文章可運行測試：
http://www.wowbox.com.tw/blog/article.asp?id=2923

程式碼如下：

<!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>CheckBox全選或全不選</title>
<style type="text/css">
p {margin:0;font-size:12px;line-height:26px;}
</style>
<script type="text/javascript">
function check_all(obj,cName)
{
var checkboxs = document.getElementsByName(cName);
for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}
}
</script>
</head>

<body>
<p><input type="checkbox" name="all" onclick="check_all(this,'c')" />全選/全不選</p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
</body>
</html>

2015年10月16日星期五

不需js的漸變效果(可套用到滿版div)

雖然沒有箭頭或任何點擊來作用換圖，但很簡單就能讓手機電腦都能使用的輪播，而且配合做好的滿版div可以輕鬆實現滿版輪播效果！

資料來源：http://blog.shihshih.com/pure-css-slider/

Step 1:先將圖片就定位

HTML Markup


<divdiv class="slider_container">
    <divdiv>
        <divimg src="images/image1.png" alt="pure css3 slider" />
        <divspan class="info">Image Description
    <div/div>
    <divdiv>
        <divimg src="images/image2.png" alt="pure css3 slider" />
        <divspan class="info">Image Description
    <div/div>
    <divdiv>
        <divimg src="images/image3.png" alt="pure css3 slider" />
        <divspan class="info">Image Description
    <div/div>
    <divdiv>
        <divimg src="images/image4.png" alt="pure css3 slider" />
        <divspan class="info">Image Description
    <div/div>
    <divdiv>
        <divimg src="images/image5.png" alt="pure css3 slider" />
        <divspan class="info">Image Description
    <div/div>
<div/div>

CSS Style


.slider_container {
    margin: 30px auto;
    width: 400px;
    height: 280px;
    position: relative;
    border: 20px solid;    
    border-color: #fff;
    border-bottom-width: 100px;
    background-color: #f5f5f5;
    box-shadow: #666 0 0 5px;
}

.slider_container div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

Step 2:確認輪播效果的時間軸

先決定過場時間(前後兩張圖片重疊的時間)、每張圖片播放的時間、完成一個週期需要多少時間。

由上圖我們知道我們的輪播器共有5張圖片，過場時間為1秒、每張圖片播放4秒、一個完整的週期是25秒。因為@keyframe的時間是以百分比來表示，因為我們要先把秒換成百分比。
100% / 25秒 = 4% ( 每秒)
4% = 1秒

CSS3 Keyframes Animation

設定動畫週期。


.slider_container div {
    -webkit-animation: round 25s linear infinite;
            animation: round 25s linear infinite;
}

@-webkit-keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}

每張圖片進場時間相隔5秒


.slider_container div:nth-child(5) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.slider_container div:nth-child(4) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.slider_container div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

.slider_container div:nth-child(2) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

.slider_container div:nth-child(1) {
    -webkit-animation-delay: 20s;
            animation-delay: 20s;
}

CSS transition

當滑鼠移到圖片上時、底下出現 “Image Description" 字樣且輪播動畫暫停。當滑鼠離開時、"Image Description" 字樣且輪播動畫繼續播放。


.slider_container span {    
    color: #000;
    background: #fff;
    position: absolute;
    left: 0%;
    top: 280px;
    width: 400px;
    height: 100px;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    -webkit-transform:scaleY(0);
        -ms-transform:scaleY(0);
            transform:scaleY(0);
    -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}

.slider_container:hover span {
    width: 100%;
    -webkit-transform:scaleY(1);
        -ms-transform:scaleY(1);
            transform:scaleY(1);
}

Pause And Restart
當滑鼠移到圖片上時，暫停播放動畫。


.slider_container:hover div {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

訂閱：文章 (Atom)

2018年8月1日 星期三

2018年6月14日 星期四

2017年12月6日 星期三

2016年10月11日 星期二

2016年9月22日 星期四