全1645件 (1645件中 1-50件目)
{{ }}はデータバインディングに利用<script setup>import { ref } from "vue";const num = ref(123456);</script><template> <h1>{{ num }}</h1></template>
2024.06.08
コメント(0)
Vue versionの違いのようです。参考サイト(違い)参考サイト(script setup)まるで別な言語のようです。
2024.06.06
コメント(0)
参考サイト
2024.06.05
コメント(0)
参考サイト
2024.06.05
コメント(0)
view1のmergin-leftがview0とview2に影響している。</script><template> <div class="view0"> <p >あいうえお</p> </div> <div class="view1"> <p >かきくけこ</p> </div><div class="view2"> <p >さしすせそ</p> </div></template><script></script><style>.view0 { margin-top : 0px ; margin-bottom : 0px ; margin-left : 0px ; margin-right : 0px ; padding : 0px ; border : 2px solid red ; background-color : white;}.view1 { margin-top : 0px ; margin-bottom : 0px ; margin-left : 400px ; margin-right : 0px ; padding : 0px ; border : 2px solid black ; background-color : lightblue ;}.view2 { margin-top : 0px ; margin-bottom : 0px ; margin-left : 0px ; margin-right : 0px ; padding : 0px ; border : 2px solid blue ; background-color : white;}</style>
2024.06.04
コメント(0)
親の背景色とコンポーネント側の背景色を分けて記述します。App.vue<script setup>import hoge from './components/hoge.vue'</script><template><body> <div class="body0"> <hoge /> </div></body></template><style>body { background-color: lightgreen; }</style>hoge.vue<script setup>import jpgfile0 from "@/assets/hoge.jpg"defineProps({ msg: String,})</script><script>import axios from "axios";import { reactive } from "vue";const data = reactive({ responses: "", keyWord: "",});const getData = async () => { var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/" +area.value+".json"; let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> </select><h1>{{ msg }}</h1> <button @click="getData">天気取得</button> <hr> <div class="resp"> {{ data.responses.text }} </div></template><style>.resp { background-color: lightblue;}</style>
2024.05.31
コメント(0)
<script setup>defineProps({ msg: String,})</script><script>import axios from "axios";import { reactive } from "vue";const data = reactive({ responses: "", keyWord: "",});const getData = async () => { var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/" +area.value+".json"; let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> <option value="030000">岩手県</option> <option value="040000">宮城県</option> <option value="060000">山形県</option> <option value="070000">福島県</option> <option value="080000">茨城県</option> <option value="090000">栃木県</option> <option value="100000">群馬県</option> <option value="110000">埼玉県</option> <option value="130000">東京都</option> <option value="120000">千葉県</option> <option value="140000">神奈川県</option> <option value="200000">長野県</option> <option value="190000">山梨県</option> <option value="220000">静岡県</option> <option value="230000">愛知県</option> <option value="210000">岐阜県</option> <option value="240000">三重県</option> <option value="150000">新潟県</option> <option value="160000">富山県</option> <option value="170000">石川県</option> <option value="180000">福井県</option> <option value="250000">滋賀県</option> <option value="260000">京都府</option> <option value="270000">大阪府</option> <option value="280000">兵庫県</option> <option value="290000">奈良県</option> <option value="300000">和歌山県</option> <option value="330000">岡山県</option> <option value="340000">広島県</option> <option value="320000">島根県</option> <option value="310000">鳥取県</option> <option value="360000">徳島県</option> <option value="370000">香川県</option> <option value="380000">愛媛県</option> <option value="390000">高知県</option> <option value="350000">山口県</option> <option value="400000">福岡県</option> <option value="440000">大分県</option> <option value="420000">長崎県</option> <option value="410000">佐賀県</option> <option value="430000">熊本県</option> <option value="450000">宮崎県</option> <option value="460100">鹿児島県</option> </select> <h1>{{ msg }}</h1> <button @click="getData">天気取得</button> <hr> <div > {{ data.responses.text }} </div></template>@click=はv-on:click=の省略形実験サイト
2024.05.28
コメント(0)
実際のサーバー環境でないと動作しない。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><script type="module"> import {morning, evening} from './greeting.js'; morning('太郎'); evening('花子'); </script></body></html>greeting.jsfunction morning(name) { alert(`おはよう, ${name}!`); } function evening(name) { alert(`こんばんは, ${name}!`); } export {morning, evening};
2024.05.25
コメント(0)
他のファイルからアクセスが可能簡単な例App.vue<script setup>import hoge2 from './components/hoge2.vue'</script><template> <hoge2 /></template>hoge2.vue<template> <div> <p>値:{{Echo}}</p> 値を入力してください:<input type="text" v-model="value"> </div></template><script> export default { data(){ return{ value: 1234 } }, computed:{ Echo(){ return this.value } } }</script>export defaultについてJavaScriptの「export default」とは?Reactを例にexportとの違いを解説Vue 基礎勉強 v-modelVue.js methods、computed、watchの概要と使い分けについて整理してみた!ある程度、型に慣れるしかないです。
2024.05.23
コメント(0)
黒豊と白夕~天下を守る恋人たち~ DVD-SET3<映像特典DVD付> [ ヤン・ヤン[楊洋] ]
2024.05.17
コメント(0)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script><body> <div id="student"> <ul> <element0></element0> <element1></element1> </ul> </div> <script> Vue.component('element0', { template: '<li>山田</li>' }) Vue.component('element1', { template: '<li>鈴木</li>' }) new Vue({ el: '#student', })</script></body></html>
2024.05.16
コメント(0)
ミッシング〜彼らがいた〜 DVD-BOX1 【DVD】
2024.05.15
コメント(0)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ボタンでカウント</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body> <div id="app"> <button v-on:click="up">count++></button> <p>Count: {{ count }}</p> </div> <script> const app=new Vue({ el:'#app', data:{ count:0, }, methods:{ up:function(){ this.count++ } } }) </script></body></html>
2024.05.15
コメント(0)
参考サイトVue3+axiosでlocalサーバにアクセス app.vue<script setup>import hoge from './components/hoge.vue'</script><template> <main> <hoge /> </main></template><style scoped></style>hoge.vue<script setup>import axios from "axios";import { reactive } from "vue";const url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json";defineProps({ msg: String,})const data = reactive({ responses: "", keyWord: "",});const getData = async () => { let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <h1>{{ msg }}</h1> <button @click="getData">東京の天気取得</button> <hr> <div > {{ data.responses.text }} </div></template>結果実験サイト
2024.05.14
コメント(0)
SFC(単一ファイルコンポーネント)とは?
2024.05.13
コメント(0)
以下で助かりました。100%になった時の対処法Windows Searchの終了が一番効果がありました。
2024.05.13
コメント(0)
vue.js script setupの利点を説明しています。vue.js script setup
2024.05.13
コメント(0)
Vue3の環境設定は不要<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8" /> <title>CDNでVue 3</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"> </script> </head> <body> <div id="app"> {{ message }} </div> <script> const app = new Vue({ el: "#app", data: { message: "CDNでVue 3" } }); </script> </body></html>
2024.05.12
コメント(0)
これは単一ファイルコンポーネントでVue独自で、そのままブラウザに反映させても動作しない。コンポーネントのテンプレート内で ref にアクセスする<script> import { ref } from 'vue' export default { setup() { let inputData = ref('') return { inputData } } }</script><template> <input v-model="inputData" /> <p>入力された値 : {{ inputData }}</p></template>
2024.05.09
コメント(0)
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vueインスタンス</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script></head><body> <div id='app'> <p>{{ message }}</p> </div></body><script>new Vue({ el: '#app', data: { message: 'Vueインスタンス' }})</script></html>
2024.05.03
コメント(0)
axiosを使ってVue.jsとPHPで非同期通信を連携する方法ちょこっと変造index.htmlalert('成功: ' + response.data.message);register.phpecho json_encode(['success' => true, 'message' => $data->email.' : '.$data->password]);Vue(メールアドレス,パスワード)---->PHP---->VueXFREEで実行
2024.05.02
コメント(0)
こんなとこに書いてありました。wifi direct パスワードを調べる方法やや分かりづらい!
2024.04.28
コメント(0)
<script setup>import jpgfile0 from "@/assets/0.jpg"import jpgfile1 from "@/assets/1.jpg"defineProps({ msg: { type: String, required: true }})</script><template> <div class="viewjpg"> <h1 >{{ msg }}です</h1> </div> <div class="image"> <img :src="jpgfile0" width="300"> <img :src="jpgfile1" width="300"> </div></template><style scoped></style>
2024.04.26
コメント(0)
ソース
2024.04.25
コメント(0)
TypeScript には型推論という言葉が出てきます。たとえばlet any = 10;とすればanyは整数とみなされます。したがってその後any = "あいうえお";とするとエラーになります。
2024.04.24
コメント(0)
異なるApp.vueをひとつのプロジェクトでデバッグしたいときがあります。そんなときは以下のようにします。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <a href="src/test.html" target=”_blank”>App.vue</a><br> <a href="src/test2.html" target=”_blank”>App2.vue</a> </body></html>src/test.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body></html>src/test2.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main2.js"></script> </body></html>src/main.jsimport './assets/main.css'import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')src/main2.jsimport './assets/main.css'import { createApp } from 'vue'import App from './App2.vue'createApp(App).mount('#app')src/App.vuesrc/App2.vueを準備する。実行すると選択すればそれぞれを処理が実行される。
2024.04.20
コメント(0)
TypeScriptを入門者向けに解説!JavaScriptとの違いや勉強法までわかりやすく
2024.04.13
コメント(0)
以下のサイトがよさそう。Vue.jsの開発環境vue.js + typescript = vue.ts ことはじめVue.js「コンポーネント」入門Vue.js]Vue.jsでDOMやコンポーネントを操作するのに便利なref機能Vue3でTypeScriptを使う方法【CompositionAPI】【サンプル有】Vue.js+TypeScript - 開発環境構築からWebページ公開までの手順を紹介Vue.jsにおけるコンパイルは機械語へ翻訳ではなく、公開可能なhtmlにするだけみたいです。上記を自分でやってみました。npm init vue@latestcd C:\soft\vue-projectnpm list vuevue-project@0.0.0 C:\soft\vue-project+-- @vitejs/plugin-vue@5.0.4| `-- vue@3.4.27 deduped`-- vue@3.4.27 `-- @vue/server-renderer@3.4.27 `-- vue@3.4.27 dedupednpm run devnpm run build実験サイトVue.js入門 基礎から実践アプリケーション開発まで [ 川口和也 ]
2024.04.11
コメント(0)
カレンダーから獲得した日付および日付nextをキーとしてLocalStrageへ格納しています。実験サイトソース
2024.03.29
コメント(0)
カレンダーから獲得した日付をキーとしてLocalStrageへ格納しています。実験サイト<html> <head> <meta charset="UTF-8"> <title>localStorageの日記</title> </head> <body> <h1>localStorageの日記</h1> <input type="date" id="date0" value="" onchange="load()"><br> <input type="button" value="書き込み" onclick="save()" ><br> <textarea name="example2" id="text1" value="" cols="50" rows="10"></textarea> <script type="text/javascript"> function load() { var keyData = document.getElementById('date0').value; var storageData = ""; if(!localStorage.getItem(keyData)) { storageData = "空"; } else { storageData = localStorage.getItem(keyData); } document.getElementById('text1').value=storageData; } function save() { var keyData = document.getElementById('date0').value; var storageData = document.getElementById('text1').value; localStorage.setItem(keyData, storageData); } </script> </body></html>
2024.03.27
コメント(0)
実験サイト<html> <head> <meta charset="UTF-8"> <title>localStorageのテスト</title> </head> <body> <h1>localStorageのテスト key付き</h1> <input type="button" value="書き込み" onclick="save()" > key<input id="key0" type="text" value="initial_key"> data<input id="text1" type="text" value="1234"><br> <input type="button" value="読み出し" onclick="load()" > out<input id="text2" type="text" value="...."> <script type="text/javascript"> function load() { var keyData = document.getElementById('key0').value; var storageData = ""; if(!localStorage.getItem(keyData)) { storageData = "空"; } else { storageData = localStorage.getItem(keyData); } document.getElementById('text2').value=storageData; } function save() { var keyData = document.getElementById('key0').value; var storageData = document.getElementById('text1').value; localStorage.setItem(keyData, storageData); } </script> </body></html>
2024.03.26
コメント(0)
ローカルストレージってどこにある?各ブラウザでWebStorage(LocalStorage)を確認する方法ブラウザごとに別の場所に格納されます。<html> <head> <title>localStorageのテスト</title> </head> <body> <h1>localStorageのテスト</h1> <input id="text1" type="text" value="1234"><br> <input id="text2" type="text" value="...."> <p> <input type="button" value="書き込み" onclick="save()" > <input type="button" value="読み出し" onclick="load()" > </p> <script type="text/javascript"> function load() { var storageData = ""; if(!localStorage.getItem('storageData')) { storageData = "空"; } else { storageData = localStorage.getItem('storageData'); } document.getElementById('text2').value=storageData; } function save() { var storageData = document.getElementById('text1').value; localStorage.setItem('storageData', storageData); } </script> </body></html>実験サイト
2024.03.24
コメント(0)
以下を参考meta refreshって何?リダイレクトとの関係も解説!このサイトはアクセス毎に画像が変化します実験サイト<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="refresh" content="3; URL=http://snc29654.php.xdomain.jp/omikuji/auto_change.html"> <title>Sample</title></head><body> <img src="https://picsum.photos/640/480"><br> 3秒後に変化します。</body></html>
2024.03.16
コメント(0)
実験サイトajax参考<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></head><body> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> <option value="030000">岩手県</option> <option value="040000">宮城県</option> <option value="060000">山形県</option> <option value="070000">福島県</option> <option value="080000">茨城県</option> <option value="090000">栃木県</option> <option value="100000">群馬県</option> <option value="110000">埼玉県</option> <option value="130000">東京都</option> <option value="120000">千葉県</option> <option value="140000">神奈川県</option> <option value="200000">長野県</option> <option value="190000">山梨県</option> <option value="220000">静岡県</option> <option value="230000">愛知県</option> <option value="210000">岐阜県</option> <option value="240000">三重県</option> <option value="150000">新潟県</option> <option value="160000">富山県</option> <option value="170000">石川県</option> <option value="180000">福井県</option> <option value="250000">滋賀県</option> <option value="260000">京都府</option> <option value="270000">大阪府</option> <option value="280000">兵庫県</option> <option value="290000">奈良県</option> <option value="300000">和歌山県</option> <option value="330000">岡山県</option> <option value="340000">広島県</option> <option value="320000">島根県</option> <option value="310000">鳥取県</option> <option value="360000">徳島県</option> <option value="370000">香川県</option> <option value="380000">愛媛県</option> <option value="390000">高知県</option> <option value="350000">山口県</option> <option value="400000">福岡県</option> <option value="440000">大分県</option> <option value="420000">長崎県</option> <option value="410000">佐賀県</option> <option value="430000">熊本県</option> <option value="450000">宮崎県</option> <option value="460100">鹿児島県</option> </select><div><input type="button" value="予報を見る" onclick="checkButton()"></div> <p class= "output2"></p><script> function checkButton(){ $(function(){ var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/"+area.value+".json"; $.ajax({ type: "GET", url: url, dataType: "json", // 取得に成功したときの処理 success:function(data){ console.log(JSON.stringify(data, null, 2)); const data_text = data.text; //data.キー名で値を参照 $(".output2").html("<p>"+data_text+"</p>"); }, // 完了したときの処理 complete:function(){ console.log("通信が完了しました。"); }, // 失敗したときの処理 error:function(){ console.log("通信に失敗しました。"); } }); }); }; </script></body></html>2024.06.01 : 予報エリアをtextareaとした。
2024.03.16
コメント(0)
実験サイト<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></head><body> <p class= "output2"></p><script> $(function(){ const url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json"; $.ajax({ type: "GET", url: url, dataType: "json", // 取得に成功したときの処理 success:function(data){ console.log(JSON.stringify(data, null, 2)); const data_text = data.text; //data.キー名で値を参照 $(".output2").html("<p>"+data_text+"</p>"); }, // 完了したときの処理 complete:function(){ console.log("通信が完了しました。"); }, // 失敗したときの処理 error:function(){ console.log("通信に失敗しました。"); } }); }); </script></body></html>
2024.03.15
コメント(0)
クリックをシミュレートします。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form> <input type="checkbox" id="check1" onmouseover="Function1()"> </form><script> function Function1() { document.getElementById("check1").click(); }</script></body></html>
2024.03.14
コメント(0)
<!DOCTYPE html><html><head> <meta charset="utf-8"/></head><body> <a href="../jpg/30.jpg" download="test.jpg">ダウウンロード</a></body></html>ここに張り付けて 保存 実行
2024.03.13
コメント(0)
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> </head> <body> <label>ファイル書き込みテスト</label> <input type="text" id="call" value="初期値" onchange="textchange()" > <br /> <br /> <div id="message_a"></div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> // イベントハンドラー function textchange() { var call = document.getElementById("call").value; var message = ""; message = call.toUpperCase(); document.getElementById("message_a").innerHTML = message; download_txt("test.txt", message); } // イベントハンドラーを対応付ける document.getElementById("call").onchange = textchange; function download_txt(file_name, data) { const blob = new Blob([data], {type: 'text/plain'}); const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); a.download = file_name; a.href = url; a.click(); a.remove(); URL.revokeObjectURL(url); }</script></body></html>
2024.03.11
コメント(0)
srcに直接バイナリ指定すればネットワークアクセスがなくなります。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAFAAcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDlTRRRXzB+/n//2Q==" alt=""></body></html>
2024.03.09
コメント(0)
実験サイト<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>画像ジャンプ</title> </head> <body> <h1>ジャンプ</h1> <div id="top"></div> <p> <img src="./jpg/0.jpg" width="30"></a> <a href="#link0">画像0へジャンプ</a> <img src="./jpg/1.jpg" width="30"></a> <a href="#link1">画像1へジャンプ</a> </p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <img id="link0" src="./jpg/0.jpg" width="300"></a> <a href="#top">先頭</a> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <img id="link1" src="./jpg/1.jpg" width="300"></a> <a href="#top">先頭</a> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> </body></html>
2024.03.06
コメント(0)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ジャンプ</title> </head> <body> <h1>ジャンプ</h1> <p> <a href="#link">飛びます</a> </p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> <a id="link">ここへ</a> </p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> </body></html>
2024.03.05
コメント(0)
声は戻るのでしょうか?美人骨 DVD-BOX1 [ アレン・レン[任嘉倫] ]
2024.03.04
コメント(0)
<html><body><canvas id="canvas"></canvas></body><script> const canvas = document.getElementById("canvas"); let imagePath = "jpg/0.jpg"; draw(canvas,imagePath); function draw(canvas,imagePath){ const image = new Image(); image.addEventListener("load",function (){ canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0,0,canvas.width,canvas.height, 0,0,canvas.width/6,canvas.height/6 ); ctx.drawImage(image, 0,0,canvas.width,canvas.height, 200,200,canvas.width/6,canvas.height/6 ); }); image.src = imagePath; } </script></html>
2024.03.04
コメント(0)
実験サイト
2024.03.01
コメント(0)
サーバー側画像はphpで集めます。php<?php// ファイル$files = glob('../jpg/*.jpg');$imax=count($files)-1;$ran=rand(0,$imax);$i=0;foreach ($files as $key => $value) { if($i==$ran){ $file_name=$value; break; } $i++;}$type = 'image/jpeg'; // base64エンコード$img = base64_encode(file_get_contents($file_name));// Ajax応答データ$list = array("img" => $img, "type" => $type);// JSONデータを出力echo json_encode($list);exit();?>実験サイト
2024.02.29
コメント(0)
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> function get_text() { $.ajax({ url: "loop_test.php", async: true, success: function(data) { console.log("======>succes"); document.write(data); document.write("<br>"); } }); } $(document).ready(function() { console.log("======>interval in"); setInterval(get_text, 1000); }); </script></head><body></body></html>実験サイト
2024.02.29
コメント(0)
JavaScriptだけではリストは取れないのでphpからjavascriptへ画像リストを送る。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><?php$files = glob('../jpg/*.jpg');echo '<ul>';echo '<img id = "pic" src = "" width = 30% height = 30% >';echo '<script>';echo 'const img = ['; foreach ($files as $key => $value) { echo '"'.$value.'",'; } echo '];'; echo 'let count = -1;'; echo 'jpgChange();'; echo 'function jpgChange()'; echo '{'; echo 'count++;'; echo 'if (count == img.length) count = 0;'; echo 'pic.src = img[count];'; echo 'setTimeout("jpgChange()",1000);'; echo '}'; echo '</script>'; echo '</ul>';?></body></html>実験サイト
2024.02.27
コメント(0)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><?php$files = glob('../jpg/*.jpg');foreach ($files as $key => $value) { echo '<img src='.$value . ' width=300px>'; echo $value.'<br>';}?></body></html>実験サイト
2024.02.23
コメント(0)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="text" onchange="func(this)"><script>function func(obj){ alert(obj.value);}</script></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button type=”button” onclick="func(this)">ボタン</button> <script>function func(obj){ alert(obj.textContent);}</script></body></html>
2024.02.22
コメント(0)
実験サイト参考参考サイト
2024.02.19
コメント(0)
全1645件 (1645件中 1-50件目)