web (traditional html,js,css): 7月 2022

2022年7月20日星期三

window.scrollTo instant

window.scrollTo({

top: 0,

left: 0,

behavior: 'instant'

});

[fix] iOS browser css :active pseudo styles

iOS is a bit strange on that. You can use ontouchstart as follows:

<button class="button" ontouchstart>test</button>

Or the pseudo :target (works for <a> tags)

.button:target { 
     background-color: red; box-shadow: 0 5px #666; transform: 
     translateY(4px); 
 }

2022年7月19日星期二

js foreach

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

[js] variables in string

const poem = "The Wide Ocean";

const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;

2022年7月18日星期一

How to clear/disable js warnings console log error? (turn off)

How to clear/disable js warnings console log error?

console.log = console.warn = console.error = () => {};

You can overwrite the console methods to make them no-op. Just make sure that you run this code before any other code.

[css]remove the gloss on a < select > element in "Safari on Mac" / "Firefox ugly ui"?

-webkit-appearance:none; /*mac safari*/

-moz-appearance: none; /*firefox*/

2022年7月17日星期日

js scroll To Bottom

function scrollToBottom() {

    window.scrollTo(0, document.documentElement.scrollHeight);
}

css breakpoint

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

css left right separate

display: flex;

/* establish flex container */

flex-direction: row;

/* default value; can be omitted */

flex-wrap: nowrap;

/* default value; can be omitted */

justify-content: space-between;

/* switched from default (flex-start, see below) */

[css] disable select

.noselect {

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

[css] text overflow ellipsis

div {

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

2022年7月16日星期六

[css] vertical center img and text

<div>{taginfo.name}</div>

</div>

.tagstitle{

align-items: center;

display: flex;

}

Why is String.prototype.substr() deprecated?

Moreover, substr is largely redundant with substring and slice, but the second argument has a different meaning,.

console.log("testing".substring(1));//esting

console.log("testing".substr(1)); //esting

URL ENCODE #

%23 = #

https://www.urlencoder.org/

2022年7月14日星期四

[html css] img wrap text

img {

      float: left;

      margin: 5px;

}

[ios browser] long time white screen when no loading

put css js into <body></body>

because ios browser will be white screen before loading the line into <body></body>

so, as fast as possible to load <body></body>

[js + css] hide all when loading

js:

document.documentElement.style = "opacity: 0;"; //hide all (document)

document.documentElement.style = "opacity: 1;";//display document

[js] synchronous fetch (await for result) (XMLHttpRequest)

var request = new XMLHttpRequest();

request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
  console.log(request.responseText);
}

2022年7月13日星期三

[css] font face 後備 font (local)

@font-face {

    font-family: 'SourceCodePro';
    src: url('./fonts/SourceCodePro-Regular.woff') format('woff'),
    local('Arial'),
    local('Helvetica'),
    local('sans-serif'); 
}

meta og:image cannot use short url

Wrong

content="/test.png" />

Correct

content="https://abc.com/test.png" />

img onerror

<img src="invalid_link"

     onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
>

2022年7月12日星期二

iframe loading animation css

.holds-the-iframe {

background:url(/tdnotes/gif/loading.gif) center center no-repeat;

background-size: 30px;

}

[js, support react] check a element whether on screen/shown (can used to check "scrolled to bottom?" )

function isInViewport(element) {

const rect = element.getBoundingClientRect();

return (

rect.top >= 0 &&

rect.left >= 0 &&

rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);

}

[js] format date - 10 Jul,2022

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const formatDate = (date) => {

let formatted_date = date.getDate() + " " + months[date.getMonth()] + "," + date.getFullYear()

return formatted_date;

}

------------------------------------------------------------------

T"

在 JavaScript 中使用 `toDateString()` 格式化 JavaScript 資料

此方法提取日期並以字串形式返回它。

var date = new Date();
result = date.toDateString();
console.log(result);

輸出：

"Thu Mar 18 2021"

在 JavaScript 中使用 `toISOString()` 格式化 JavaScript 資料

它以 ISO 8601 格式返回包含日期/時間的字串。

var date = new Date();
result = date.toISOString();
console.log(result);

輸出：

"2021-03-18T19:11:35.957Z"

在 JavaScript 中使用 `toLocaleString()` 格式化 JavaScript 資料

它將使用語言環境設定將日期物件轉換為字串。

var date = new Date();
result = date.toLocaleString();
console.log(result);

輸出：

"3/18/2021, 8:13:03 PM"

在 JavaScript 中使用 `toLocaleTimeString()` 格式化 JavaScript 資料

它將日期物件轉換為字串，但只提取時間，使用本地設定。

var date = new Date();
result = date.toLocaleTimeString();
console.log(result);

輸出：

"8:14:22 PM"

在 JavaScript 中使用自定義函式格式化日期

日期格式 `dd-mm-yyyy` 或 `dd-mm-yyyy` 及類似格式

我們使用 getDate()、getMonth() 和 getFullYear() 方法來獲取日期的各個部分，並使用所需的符號和所需的順序將其連線起來。

例如，我們可以通過編寫下面的自定義函式來獲得 dd/mm/yyyy、dd-mm-yyyy 和 mm/yyyy 等任何我們喜歡的方式。

var date = new Date();
const formatDate = (date)=>{
let formatted_date = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear()
 return formatted_date;
}
console.log(formatDate(date));

輸出：

"18-3-2021"

我們還可以在日期字串中放入月份名稱，例如 January，February，March。

var date = new Date();
const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];

const formatDate = (date)=>{
    let formatted_date = date.getDate() + "-" + months[date.getMonth()] + "-" + date.getFullYear()
    return formatted_date;
}
console.log(formatDate(date));

輸出：

"18-MAR-2021"

日期格式 `yyyy-mm-dd hh:mm:ss` 和類似的格式

我們使用所有方法 getDate()，getMonth() 和 getFullYear()，getHour()，getminutes()，getsecond() 來分別獲取日期和時間的各個部分，以及使用我們想要的符號和我們想要的順序將它們連線起來。

var date = new Date();

const formatDate = (current_datetime)=>{
    let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate() + " " + current_datetime.getHours() + ":" + current_datetime.getMinutes() + ":" + current_datetime.getSeconds();
    return formatted_date;
}

console.log(formatDate(date));

輸出：

"2021-3-18 20:21:2"

訂閱：留言 (Atom)