JavaScript

jQuery デバイス 判別

<p><img src="img/p_sp.jp" class="switch"></p> <styel> .switch{visibility: hidden; } </style> var setImg = $('.switch') , namePc = '_pc' , // PC用 nameSp = '_sp' , // スマホ用 switchwidth = 767; // 判別 setImg.each(function(){ var selfImg = $(this); function switchImg() { if(window.innerWidth > swit…

Javascript 投票 メモ

<html lang="ja"><head> <meta charset="utf-8"> <title>人気投票</title></head> <style> .gr4 > *{width: 23.4%; float:left;padding:0.4em;}img{width:100%; height: auto;}</style> <body> <div class="gr4"> <div> <p onclick='cnt("clk");'><img src="img/01.jpg"></p> </div> <div> </div></div></body></html>

jQuery アニメーション メモ

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

JS メモ web

<script type="text/javascript">/* 消し */$(document).ready(function(){jQuery("#got").delay(7000).fadeOut(1000);});</script> <script>/*-- 画面サイズ ピシャリ ---*/$(function(){ $(document).ready(function(){ hsize = $(window).height(); $("#to_img").css("height",hsize + "px"); }); $(window…

JS ストッロゲーム メモ

<html lang="ja"><head> <meta charset="utf-8"> <title>スロット</title> <style> body{background: #e0e0e0;font-family: Arial,sans-serif; font-size: 16px; margin-top: 30px;text-align: center;} .panel{display: inline-block; width: 60px; padding: 7px; border-radius: 5px; margin-bottom: 15px; co…</meta></head></html>

jQuery パララックス下地

<section> <div class="scrEvent area1"><p>コンテンツエリア_1</p></div> <div class="scrEvent area2"><p>コンテンツエリア_2</p></div> <div class="scrEvent area3"><p>コンテンツエリア_3</p></div> <div class="scrEvent area4"><p>コンテンツエリア_4</p></div> <div class="scrEvent area5"><p>コンテンツエリア_5</p></div> </section>

jQuery 2月メモ 01

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

ajax xml 取得 表示 

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

jQuery アンカー先情報 ニュースティッカー

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </meta></meta></meta></head></html>

node.js ログインして、お気に入りを取得 (作詞掲示板)

// お気に入りの作品を取り出す for CasperJS // 作詞掲示場のユーザー名とパスワードvar BBS_USER = "ユーザー名";var BBS_PASS = "パスワード"; // CasperJSを使えるようにするvar casper = require('casper').create();casper.start(); // 作詞掲示板のロ…

jQuery animate hover メモ

<html lang="ja"> <head> <meta charset="utf-8"> <title>Jquery メモ</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> </head> <body> <style>/*- fadeBTN フェードボタン hover*/ .fadeB…</body></html>

Flickr で検索してスクショ。

ユーザーエージェントが合わない × ------------ // Flickrでスクリーンショットを撮る var casper = require('casper').create(); casper.start(); // 画像サイズ指定casper.viewport(1400, 800); // UserAgentの指定casper.userAgent('User-Agent: Mozilla…

pahntomjs 画面キャプチャを取る

// CasperJS でスクリーンショットを撮る var casper = require('casper').create(); casper.start(); // ページを開くcasper.open('http://tokotoko6667777.hippy.jp/tossy-n/'); // スクリーンショット撮影casper.then(function(){ casper.capture("screen…

node.js 階層を指定してURLダウンロード

// リンクを解析してダウンロード // モジュール読みこみvar client = require('cheerio-httpcli');var request = require('request');var URL = require('url');var fs = require('fs');var path = require('path'); // 階層の指定var LINK_LEVEL = 3;// ペ…

node.js 絶対パスに変換 <a>

// モジュールの読み込み var client = require('cheerio-httpcli'); // nodeのモジュールvar URL = require('url'); // 標準モジュール // URLとパラメーターvar url = "http://www.aozora.gr.jp/index_pages/person81.html";var param = {}; // ダウンロー…

レスポンシブ メニュー 3

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>ハンバーガーメニュー 2</title> <style> body { padding: 0; mar…</link></meta></meta></meta></head></html>

レスポンシブ メニュー 1,2

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>ハンバーガーメニュー 右 上 2つ</title> <style> body { padding: 0…</link></meta></meta></meta></head></html>

node.js モジュール cheerio-httpcli

// モジュールの取り込みvar client = require('cheerio-httpcli'); // ダウンロード var url = "http://www.aozora.gr.jp/index_pages/person81.html"; var param = {};// fetch ダウンロードからページの解析ができるメソッドclient.fetch(url, param, fun…

jQuery memo_03 hover

index.html ----- <html lang="ja"> <head> <meta charset="utf-8"> <title>ホバーで表示</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div class="col-4 gallery-item"> </div></body></html>

jQuery memo_02

index.html --- <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>クリックで表示</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div id="read-more">もっと読む</div> <div id="more-text">…</div></body></html>

jQuery memo_01

$(function(){ // SNSボタン $('.social-icon').hover( function(){ $(this).children('span').animate({ 'font-size':'30px' }, 300); }, function(){ $(this).children('span').animate({ 'font-size':'24px' }, 300); } ); // トップへ戻るボタン $('#top…

node.js htmlファイル ダウンロード

// urlにあるファイルを savepath にダウンロードする // ダウンロード元URLの指定var url = "http://tokotoko6667777.hippy.jp/tossy-n/"; // 保存先のパスを指定var savepath = "test.html"; // 利用モジュールの取り込みvar http = require('http'); // H…

JavaScript タブメニュー

index.html ----- <html lang="ja"> <head> <meta charset="utf-8"> <title>tab JS</title> <style> body { padding: 0; margin: 0; font-family: Verdana, sans-serif; } .container { padding: 0; margin: 30px auto; width: 500px; background: #dce0…</meta></head></html>

JavaScript おみくじ

<html lang="ja"><head> <meta charset="utf-8"> <title>おみくじ</title> <style> body { background: #e0e0e0; text-align: center; font-size: 16px; color: #fff; font-family: Arial, sans-serif; } #result { margin: 30px auto; width: 180px; height: 180px; border-radius: 50%; line-height: 180px; font-s…</meta></head></html>