JWEB2 
PROJECT INQUIRY

Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

총 108건의 글

CSS 22.04.27 조회 155

CSS blend mode로 이미지·배경 합성하기 (multiply, screen 등)

CSS 的 mix-blend-mode 与 background-blend-mode 实现图片与背景合成的方法。整理了 multiply(正片叠底)、screen(滤色)、overlay(叠加)、darken、lighten、difference、hue、saturation 等全部混合模式，并说明 mix-blend-mode 作用于 img 元素、background-blend-mode 作用于 div 背景，两者使用场景不同。

mix-blend-mode: normal; //正常

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

mix-blend-mode: color-dodge; //颜色减淡

mix-blend-mode: color-burn; //颜色加深

mix-blend-mode: hard-light; //强光

mix-blend-mode: soft-light; //柔光

mix-blend-mode: difference; //差值

mix-blend-mode: exclusion; //排除

mix-blend-mode: hue; //色相

mix-blend-mode: saturation; //饱和度

mix-blend-mode: color; //颜色

mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始

mix-blend-mode: inherit; //继承

mix-blend-mode: unset; //复原

这里就是div自己的背景图片和自己的背景颜色混合了，实现了正片叠低。注意只有一个元素div，这个div有背景图片和背景颜色。

background-blend-mode: multiply;是div属性，mix-blend-mode: multiply; 是img的属性，两个东西有差别

#css #blendmode #background #image
PHP 22.04.16 조회 149

PHP 엑셀 업로드 시 날짜·시간 변환 함수

PHP에서 엑셀 파일을 업로드할 때 날짜/시간 값을 일반 날짜 형식으로 변환하는 함수 excelformatTime()을 소개한다. 값에 '-'가 포함된 문자열이면 strtotime으로 변환하고, 그렇지 않은 엑셀 시리얼 숫자면 기준값 25569에서 (값-25569)*3600*24로 환산해 Y-m-d H:i:s 형식으로 반환한다.

function excelformatTime($timevalue){

if(strpos($timevalue,"-")){
$time =  strtotime($timevalue);
}else{
$time =  intval(($timevalue- 25569) * 3600 * 24);
}
return date('Y-m-d H:i:s', $time);
}
#php #excel #datetime #upload
PHP 22.03.10 조회 202

PHP file_get_contents HTTP request failed 오류 해결하기

PHP의 file_get_contents나 readfile로 원격 파일을 읽을 때 발생하는 "failed to open stream: HTTP request failed!" 오류를 해결하는 방법이다. php.ini에서 allow_url_fopen을 On으로 설정하고 user_agent를 Mozilla 값으로 바꾸는 방법, 그리고 반복 호출 시에도 안정적인 cURL 기반 대체 코드를 정리했다.

当使用php5自带的file_get_contents方法来获取远程文件的时候，有时候会出现file_get_contents(): failed to open stream: HTTP request failed!这个警告信息。

google或者baidu一下，好多这样的问题，解决的方法都是修改php.ini，把allow_url_fopen给启用，改成 allow_url_fopen = On

这样做可以解决某些人的问题，有人说在php.ini中，有这样两个选项:allow_url_fopen =on(表示可以通过url打开远程文件)，user_agent="PHP"（表示通过哪种脚本访问网络，默认前面有个 " ; " 去掉即可。）重启服务器。

但是有些还是会有这个警告信息，想用完美的解决还差一步，还得设置php.ini里面的user_agent，php默认的user_agent是PHP，我们把它改成Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)来模拟浏览器就可以了

user_agent=”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)”

在工作中遇到这个问题，后完美解决，故分享给大家。

我批量抓取chemblink的结构式发现循环后有部分图片无法显示，而远程文件是存在的。

抓取远程文件的时候出现类似Warning: readfile(http://www.php100.com/logo.gif)) [function.readfile]: failed to open stream: HTTP request failed! 这样的警告信息，我使用的是

ob_start();

readfile("http://www.php100.com/logo.gif");

$img = ob_get_contents();

ob_end_clean();

这样在运行中会时不时的出现上述错误，我也换过file_get_contents等其他函数都没用用，在网上查阅后发现用CURL方法抓取不会出错

$url = "http://www.php100.com/logo.gif";

$ch = curl_init();

curl_setopt ($ch, CURLOPT_URL, $url);

curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT,10);

$img = curl_exec($ch);

#php #file_get_contents #curl #error
CSS 22.03.04 조회 153

반응형 웹에서 테이블 깨지지 않게 처리하기 (CSS)

모바일 화면에서 테이블이 화면을 벗어나 깨지지 않도록 처리하는 반응형 CSS 기법이다. 테이블을 감싸는 컨테이너에 overflow-x: auto를 적용해 가로 스크롤을 허용하는 방식과, 화면이 좁아지면 셀을 세로로 재배치하는 방식의 HTML·CSS 예제를 제공한다.

HTML

<div id="custom-responsive-table">
<table class="table">
<thead class="bg-light">
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
</tr>
</thead>
<tbody>
<tr>
<td data-title="h1">content1</td>
<td data-title="h2">content2</a></td>
<td data-title="h3">content3</td>
<td data-title="h4">content4</td>
</tr>
<tr>
<td data-title="h1">second1</td>
<td data-title="h2">second2</td>
<td data-title="h3">second3</td>
<td data-title="h4">second4</td>
</tr>
</tbody>
</table>
</div>
<p>https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table</p>

CSS

/*반응형 테이블*/
@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#custom-responsive-table table,
#custom-responsive-table thead,
#custom-responsive-table tbody,
#custom-responsive-table th,
#custom-responsive-table td,
#custom-responsive-table tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#custom-responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

#custom-responsive-table tr { border: 1px solid #ccc; }

#custom-responsive-table td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%; /*컬럼위치조정*/
white-space: normal;
text-align:left;
}

#custom-responsive-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

/*
Label the data
*/
#custom-responsive-table td:before { content: attr(data-title); }
}
#css #responsive #table #mobile
JAVASCRIPT jQuery 22.02.14 조회 177

onclick(this)와 onclick(this.value) 사용법 정리

HTML 태그에서 onclick="함수(this)" 형태로 현재 요소나 값을 전달하는 방법을 정리한 글이다. this로 클릭된 요소 객체 자체를 넘기는 방식과, input 등에서 this.value로 입력된 값만 넘기는 방식의 차이를 예제 코드와 함께 설명하고, 페이지 이동이나 Ajax 실행 시 동적 파라미터를 전달하는 활용법을 소개한다.

<html>
<head>
<script language="javascript">
function test(value){
if(value=='1') {
alert("11111111");
}else{
alert("00000000");
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="radio" name="ra" value="1" onclick="test(this.value)"/>
个人
<input type="radio" name="ra" value="0" onclick="test(this.value)""/>
公司
</form>
</body>
</html>

2.onclick(this)代码详解

一般标签中会使用href和onclick两种方式来进行进行页面跳转或执行动作，但是小编一般都会使用onclick来进行执行Ajax函数进行跳转，并同时使用onclick=”xxxxxx(this)”来传递动态参数：例子如下

JSP代码如下：

<a href="javascript:void(0);"  onclick="xxxx(this)" userId=${userId}>${userName}></a>

JSP代码如下：

function  xxxx(obj) {
var thisObj=$(obj);//js对象转jquery对象
var userId=thsiObj.attr("userId");
alert(userId);
}
#javascript #onclick #jquery #event


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.

PROJECT INQUIRY