แสดงกระทู้
HTML
โค๊ด:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" name="viewport">
<title>ราคาทองวันนี้ </title>
<script src="https://www.namchiang.com/cdn-cgi/apps/head/tgq4PYWpHedMPnOG5bSQvtixn9I.js"></script><link rel='stylesheet' href='[url]https://www.namchiang.com/wp-content/themes/namchiang/css/bootstrap.min.css'[/url] />
<link rel='stylesheet' href='[url]https://www.namchiang.com/wp-content/themes/namchiang/css/font-awesome.min.css'[/url] />
<link rel='stylesheet' href='[url]https://www.namchiang.com/wp-content/uploads/css/odometer-theme-default.css'[/url] />
<style>
@import url('[url]https://fonts.googleapis.com/css?family=Prompt:300,700'[/url]);
h1, h2, h3, h4, h5, h6, input, button, select, textarea, body {
font-family: 'Prompt', sans-serif;
font-size: 15px;
color: #333;
}
strong {
font-weight: 700;
}
a {
transition: 0.3s;
outline: 0;
text-decoration: none;
color: #BD220D;
}
a:hover,
a:active,
a:focus {
color: #EF7767;
outline: 0;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 10px;
font-weight: 700;
}
h1{
font-size: 1.6em;
}
h2{
font-size: 1.4em;
}
h3{
font-size: 1.17em;
}
h4, p{
font-size: 1em;
}
p {
margin: 0 0 20px;
}
.accent {
color: #BD220D;
}
.accent2 {
color: #fff;
}
.content {
height: 100vh;
}
.head > div {
/* height: 20vh; */
}
.body {
background: #bd220d;
color: #fff;
}
.body > div {
/* height: 40vh; */
}
.body2 > div {
/* height: 15vh; */
padding: 0 5px;
}
.body2 > div > .row {
margin-left: -5px;
margin-right: -5px;
}
.body2 > div:not(:first-child) {
border-left: 1px solid #ccc;
}
.body h2 {
color: #fff;
}
.brand > img {
height: auto;
max-width: 100%;
width: 60px;
margin: 5px 0;
}
.brand .gt-logo {
position: relative;
z-index: 2;
}
.brand .nc-logo {
float: right;
}
.text-header {
left: 50%;
position: absolute;
top: 30%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
.date {
bottom: 0;
left: 50%;
margin-bottom: 5px;
position: absolute;
-webkit-transform: translate(-50%, 0px);
transform: translate(-50%, 0px);
}
.price {
font-size: 2em;
color: #FFD700;
}
.fa-angle-double-up, .up {
color: #62d53b;
}
.fa-angle-double-down, .down {
color: #FF3D38;
}
.price-small.up:before {
content: " ";
}
.price-small.down:before {
content: "(";
}
.price-small.down:after {
content: ")";
}
#shiftprice {
position: relative;
margin-top: 20px;
margin-bottom: 0;
}
#shiftprice > .price {
padding-right: 20px;
font-size: 1.5em
}
#shiftprice > .fas {
bottom: 3px;
font-size: 1.2em;
position: absolute;
right: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#sumchange {
font-size: 1.5em;
}
#buy {
margin-top: 10px;
}
#sms {
border: 1px solid;
border-radius: 5px;
padding: 8px;
margin-top: 10px;
overflow: hidden;
}
#sms > div {
height: auto !important;
width: 100%;
}
#sms p {
margin: 0;
}
.site {
margin: 10px 0 0;
}
@media (min-width: 768px) and (min-height: 400px) {
.head > div,
.body > div,
.body2 > div {
height: auto;
}
body {
font-size: 30px;
}
.brand > img {
width: 140px;
}
#shiftprice > .price {
padding-right: 40px;
}
.price {
font-size: 1.5em;
}
}
@media (min-width: 992px) and (min-height: 400px) {
body {
font-size: 28px;
}
#buy, #sale {
margin-top: 50px;
}
}
@media (min-width: 1200px) and (min-height: 400px) {
body {
font-size: 30px;
}
#shiftprice > .price {
padding-right: 60px;
}
}
@media (min-width: 1200px) and (min-height: 800px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h4, p {
font-size: 1.3em;
}
.brand > img {
width: 200px;
}
}
@media (max-width: 340px) {
body {
font-size: 12px;
}
#shiftprice, #buy {
margin-top: 20px;
}
.brand > img {
width: 55px;
margin: 8px 0;
}
}
</style>
<script type='text/javascript' src='[url]https://www.namchiang.com/wp-includes/js/jquery/jquery.js'[/url]></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="content">
<div class="row head">
<div class="col-sm-12">
<h1 class="accent text-header"><em>ราคาทองแท่งวันนี้</em></h1>
<p class="date">เมื่อ <span>0000-00-00 00:00:00</span></p>
</div>
</div>
<div class="row body text-right">
<div class="col-4" style="padding-right: 0">
<h2 id="shiftprice"><span class="price odometer">250</span><i class="fas"></i></h2>
<p class="accent2">เปลี่ยนแปลงรวม <span id="sumchange" class="price-small">0</span></p>
</div>
<div class="col-8">
<div class="row">
<div class="col-md-6">
<h2 id="buy" class="accent2">รับซื้อ <span class="price odometer">00000</span></h2>
</div>
<div class="col-md-6">
<h2 id="sale" class="accent2">ขายออก <span class="price odometer">00000</span></h2>
</div>
</div>
</div>
</div>
<div class="row body2 text-center">
<div class="col-4">
<div class="row">
<div class="col-md-6 col-lg-12"><h4>Gold Spot</h4></div>
<div class="col-md-6 col-lg-12"><span id="goldspot" class="price-small odometer">0</span> <span id="shiftgoldspot" class="price-small">0.0</span></div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-md-6 col-lg-12"><h4>USD/THB</h4></div>
<div class="col-md-6 col-lg-12"><span id="usd" class="price-small odometer">00.00</span> <span id="shiftusd" class="price-small">0.00</span></div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-md-6 col-lg-12"><h4>NYM Crude</h4></div>
<div class="col-md-6 col-lg-12"><span id="crude" class="price-small odometer">00.00</span> <span id="shiftcrude" class="price-small">0.00</span></div>
</div>
</div>
</div>
<div class="row foot">
<div class="col-sm-12">
<div id="sms">
<marquee behavior="scroll" direction="left" scrollamount="2">
test
</marquee>
</div>
</div>
</div>
</div>
</div>
</section>
<script type='text/javascript' src='[url]https://www.namchiang.com/wp-content/themes/namchiang/js/bootstrap.min.js'[/url]></script>
<script type="text/javascript" src="https://www.namchiang.com/wp-content/uploads/scripts/marquee.js"></script>
<script type="text/javascript" src="https://www.namchiang.com/wp-content/uploads/scripts/odometer.min.js"></script>
<script>var $ = jQuery.noConflict();</script>
<script>
$(document).ready(function() {
$('marquee').attr('width', $('#sms').innerWidth());
$('marquee').marquee();
update_gold_data();
});
setInterval(function(){
var update_time = '';
var currentTime = new Date();
$.get('[url]https://www.namchiang.com/GoldPriceToday.xml?currTime='[/url] currentTime, function(data){
update_time = $(data).find('update').text();
if(update_time != $('.date > span').text()){
update_gold_data();
}
});
}, 60000);
function update_gold_data(){
remove_styling();
var currentTime = new Date();
$.get('[url]https://www.namchiang.com/GoldPriceToday.xml?currTime='[/url] currentTime, function(data){
$('.date > span').text($(data).find('update').text());
$('#shiftprice > .price').text($(data).find('buypricechg').text());
$('#sumchange').text($(data).find('SumOfChg').text());
$('#buy > .price').text($(data).find('buyprice').text());
$('#sale > .price').text($(data).find('saleprice').text());
$('#goldspot').text($(data).find('goldspot').text());
$('#shiftgoldspot').text($(data).find('goldspotchg').text());
$('#usd').text($(data).find('usdthb').text());
$('#shiftusd').text($(data).find('usdthbchg').text());
$('#crude').text($(data).find('nymexcrude').text());
$('#shiftcrude').text($(data).find('nymexcrudechg').text());
$('#sms p').text($(data).find('sms').text());
$('#shiftprice > .price').addClass( $(data).find('buypricechg').text() >= 0 ? 'up' : 'down' );
$('#sumchange').addClass( $(data).find('SumOfChg').text() >= 0 ? 'up' : 'down' );
$('#shiftgoldspot').addClass( $(data).find('goldspotchg').text() >= 0 ? 'up' : 'down' );
$('#shiftusd').addClass( $(data).find('usdthbchg').text() >= 0 ? 'up' : 'down' );
$('#shiftcrude').addClass( $(data).find('nymexcrudechg').text() >= 0 ? 'up' : 'down' );
$('#shiftprice > .fas').addClass( $(data).find('buypricechg').text() >= 0 ? 'fa-angle-double-up' : 'fa-angle-double-down' );
if( $(data).find('buypricechg').text() > 0){
var audio = new Audio('[url]https://www.namchiang.com/wp-content/uploads/sound/increase.mp3'[/url]);
}else if( $(data).find('buypricechg').text() < 0){
var audio = new Audio('[url]https://www.namchiang.com/wp-content/uploads/sound/decrease.mp3'[/url]);
}else{
var audio = new Audio('[url]https://www.namchiang.com/wp-content/uploads/sound/nochange.mp3'[/url]);
}
audio.play();
});
}
function remove_styling(){
$('.up').each(function(){
$(this).removeClass('up');
});
$('.down').each(function(){
$(this).removeClass('down');
});
$('.glyphicon-triangle-top').each(function(){
$(this).removeClass('glyphicon-triangle-top');
});
$('.glyphicon-triangle-bottom').each(function(){
$(this).removeClass('glyphicon-triangle-bottom');
});
}
</script>
</body>
</html>
โค๊ต XML ครับ
อ้างถึง
<goldprice>
<today>
<buyprice>29550</buyprice>
<buypricechg>-50</buypricechg>
<saleprice>29650</saleprice>
<usdthb>36.31</usdthb>
<usdthbchg>-0.05</usdthbchg>
<goldspot>1722.5</goldspot>
<goldspotchg>-2.5</goldspotchg>
<nymexcrude>82.6</nymexcrude>
<nymexcrudechg>0.00</nymexcrudechg>
<SumOfChg>-50</SumOfChg>
<sms>test</sms>
<update>2022-09-13 09:28:31</update>
</today>
</goldprice>
<today>
<buyprice>29550</buyprice>
<buypricechg>-50</buypricechg>
<saleprice>29650</saleprice>
<usdthb>36.31</usdthb>
<usdthbchg>-0.05</usdthbchg>
<goldspot>1722.5</goldspot>
<goldspotchg>-2.5</goldspotchg>
<nymexcrude>82.6</nymexcrude>
<nymexcrudechg>0.00</nymexcrudechg>
<SumOfChg>-50</SumOfChg>
<sms>test</sms>
<update>2022-09-13 09:28:31</update>
</today>
</goldprice>
