New
Loading...
Highchart mặc định chỉ cho phép bạn sử dụng nền màu với thuộc tính Fill hoặc backgroundColor, nhưng với thủ thuật nhỏ này có thể giúp bạn thay đổi nền màu nhàm chán bằng những hình background theo ý muốn hoặc làm một wartermark. Làm theo các bước như trong ví dụ sau:

Cách đặt background image hoặc watermark cho Highchart
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
Javascript:
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            backgroundColor: 'transparent',
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});
Css:
#container {
    background: url(http://obinb.com/img/chart-bg.png) repeat;
}

Trong ví dụ trên chúng ta sử dụng thuộc tính backgroundColor: 'transparent' để tắt nền chart, sau đó sử dụng css để fill background.

Rất đơn giản phải không nào các bạn? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn làm banner quảng cáo HTML5
- WebGL là gì? Học lập trình WebGL ở đâu?

- Làm thế nào để thoát một Function trong Javascript?
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tổng hợp những Tag (Thẻ) mới trong HTML5
- Cấu trúc chuẩn của một trang HTML5
Sau đây là cách viết một hàm chuyển đổi đơn vị thời gian từ Giây sang Giờ - Phút - Giây cực kì đơn giản bằng Javascript:

Viết hàm chuyển đổi đơn vị thời gian từ Giây sang Giờ - Phút - Giây bằng Javascript

- Viết hàm chuyển đổi, đặt tên tùy ý, mình đặt là convertHMS :
function convertHMS(value) {
    var sec_num = parseInt(value, 10); // đổi giá trị sang number (đơn vị giây)
    var hours   = Math.floor(sec_num / 3600); // giờ
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60); //  phút
    var seconds = sec_num - (hours * 3600) - (minutes * 60); //  giây
    // thêm số 0 trước đơn vị nhỏ hơn 10
    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds; // kết quả trả về HH : MM : SS
}
- Cách gọi và sử dụng:
var myTime = convertHMS(4600);
console.log(myTime); // 01:16:40

Rất đơn giản phải không các bạn? Chúc các bạn thành công!

Xem thêm:
- TypeScript là gì?
- Cách tính tổng một mảng số (number array) trong Javascript ?
- RequireJS là gì?
- WebGL là gì? Học lập trình WebGL ở đâu?
- Phép chia lấy phần nguyên trong Javascript ?

Hiện nay HTML5 đã trở nên phổ biến và được hỗ trợ ở mọi trình duyệt vì vậy việc thay thế định dạng quảng cáo Flash bằng HTML5 là cần thiết và trở thành xu hướng bắt buộc.
Về cơ bản HTML5 chạy nhẹ, hỗ trợ trên cả thiết bị mobile hay các hệ điều hành khác nhau kể cả iOS mà không cần bất kì trình player nào như Flash.

Hướng dẫn làm banner quảng cáo HTML5

Để làm banner quảng cáo HTML5 hay chuyển đổi các banner Flash thành HTML5 rất đơn giản, các bạn chỉ cần làm theo các bước sau đây:

1 Làm mới một banner HTML5:

Để làm banner HTML5 dễ dàng nhất bạn nên cài đặt và sử dụng phần mền Adobe Flash CC, sau khi cài đặt bạn mở ứng dụng lên chọn New -> HTML Canvas

- Làm banner bình thường như làm với banner Flash, lưu ý là hiện tại Flash CC chưa hỗ trợ một số hiệu ứng Flash cho HTML5 như Style: Tint, Advanced hay một số hiệu ứng Filter nên khi xuất ra file chạy sẽ không thấy được.



- Xuất file HTML5 bằng cách nhấn Enter hoặc vào Publich để setting chi tiết ( Bạn có thể đọc thêm bài viết Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC để biết thêm)

- Đặt code redirect link khi người dùng click banner:
 Sau khi xuất ra file HTML5, bạn sẽ nhận được file .html và .js, bạn mở file HTML lên trên editor và thêm đoạn code sau vào cuối function handleComplete
stage.addEventListener('click', btnRediect);
function btnRediect(){
 location.href = "http://www.obinb.com";
}
Bạn chỉnh link redirect theo ý bạn nhé :) Sau đó lưu lại và kiểm tra kết quả trên trình duyệt.

Download file banner cơ bản trong bài viết này tại đây

Lưu ý: Khi gắn banner HTML5 bạn có thể gắn trực tiếp trong qua thẻ Canvas trong html hoặc sử dụng một iframe để load vào vị trí mình muốn.

2 Chuyển đổi một banner Flash có sẵn sang HTML5:
Rất đơn giản, bạn mở file gốc của banner Flash định dạng FLA rồi làm theo các bước trong bài viết Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC là được.
Đến bước gắn link bạn làm như ở trong bài viết này nhé.

Chúc các bạn thành công!

Xem thêm:
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro...
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Tổng hợp những Tag (Thẻ) mới trong HTML5
- Cấu trúc chuẩn của một trang HTML5
Đối với các fan ruột của Manga cũng như Anime thì chắc không cần phải giải thích nhưng đối với nhiều người mới đọc Manga hoặc mới xem Anime thì nó là những từ ngữ khó hiểu vì vậy hôm nay blog xin giải thích qua những từ ngữ này để các bạn được rõ hơn:

Giải thích một số từ ngữ Manga và Anime như loli, lolicon, shoto, tsundere, yandere, coodere ...

- Loli (ロリ): Những pé gái từ 12->13 tuổi hoặc chỉ các nhân vật có ngoại hình hoặc tính cách giống các bé gái từ 12 , 13 tuổi trở xuống, ngực lép, mắt to tròn. Đa số là tsundere, 1 số là coodere và khá ít là deredere ( đọc tiếp sẽ hiểu)

- Lolicon(ロリコン) là từ chỉ những người có xu hướng thích loli

- Shoto: Những pé trai

- Tsundere: Họ là những cô gái bên ngoài rất mạnh mẽ, thậm chí có phần bạo lực nhưng bên trong lại rất e thẹn , nhút nhát , yếu đuối. Các nhân vật có tính cách này thường được nhiều người yêu thích.

- Yandere: Đây là một hình tượng trái ngược hoàn toàn với tsundere, bình thường họ rất hiền, tốt bụng và thậm chí yếu đuối. 1 đặc điểm rất chung của họ là rất chung thủy, nếu yêu 1 ai thì sẽ yêu người đó mãi mãi. Nhưng khi phát hiện ra người yêu mình đag bị dụ dỗ, hay cặp kè với ai khác......thì cô bé hiền lành kia sẽ trở nên hoàn toàn khác, họ điên lên và có khi giết cả tình địch của mình. có thể xem yandere là một trạng thái rối loạn tâm lý bắt nguồn từ ý muốn độc quyền chàng hay nàng cho riêng mình mà thôi.

- Coodere (hay Kuudere) : đây là kiểu nhân vật luôn giữ một vẻ ngoài lạnh lùng, chỉ nói khi thật sự cần thiết... cho đến khi họ tìm hiểu kĩ và tin tưởng một ai đó thì mới mở lòng mình ra với người đó.

- Dandere : gần giống coodere nhưng khác ở chỗ vẻ ngoài lạnh lùng của cô chàng ấy có thể không phải là lớp vỏ bọc mà chỉ đơn thuần là do ngại ngùng và khó giao tiếp mà thôi. Họ chỉ cảm thấy thoải mái trò chuyện với những người mình thực sự tin tưởng mà thôi

- Deredere: bề ngoài và tích cách khá giống Yan nhưng không bị lên cơn như Yan, hoàn toàn nữ tính, moe, hay ngượng trong tình yêu .Mọi thứ hoàn hảo đến nhàm

- Hentai: Dịch ra là biến thái, có mức độ khá nặng về sex

Nguồn: S.T


Tổng hợp Anime hay nhất:
Tổng hợp những bộ Anime có main nam bá đạo nhất
Tổng hợp những bộ anime bẩn bựa, hài hước đáng xem nhất
Tuyển tập những bộ Anime Viện tưởng Kinh dị hay nhất

Anime thể loại Viện tưởng + Kinh dị được khá nhiều người quan tâm và ưa thích, nhưng để tìm được một bộ tâm đắt thì khá gian nan vì thể loại này khá nhiều nhưng không phải bộ nào cũng để lại dấu ấn. Sau đây mình xin chia sẽ những bộ phim Anime thể loại Viễn tưởng + Kinh dị được nhiều người ưa thích, trong đó có mình :D

1 Kiseijuu: Sei no Kakuritsu - Ký sinh vật

Tuyển tập những bộ Anime Viện tưởng Kinh dị hay nhất

Izumi Shinichi là một thiếu niên 17 tuổi, sống cùng bố mẹ tại một khu phố yên tĩnh ở Tokyo. Một đêm nọ, những sinh vật ngoài hành tinh, có hình thù giống loài sâu, với tên gọi Kiseijū ("Ký sinh vật") đổ bộ lên Trái Đất, chiếm lấy não và điều khiển chủ thể là con người bằng cách xâm nhập qua tai hoặc mũi. Một "Ký sinh vật" có ý định bò vào tai của Shinichi khi cậu ngủ nhưng thất bại vì cậu đang đeo tai nghe, vậy nên đã xâm nhập cơ thể cậu bằng cách chui vào tay và điều khiển cánh tay phải, và sau đó lấy tên là Migi. Từ đó để tồn tại cả 2 vật chủ Shinichi và kí sinh Migi phải hợp tác với nhau để chóng lại những kí sinh vậy khác, bộ phim mang nhiều ý nghĩa khác nhau các bạn hãy từ từ khám phá nhé.

2 Shingeki no Kyojin - Attack on Titan


Phim kể về Eren Jaeger, người sống trong một thành phố được bao bọc bởi những bức tường cao chất ngất. Trong khi đó, ở bên ngoài, con người đang chống lại Titans. Trong nhiều thập kỉ, các thành viên của Scouting Legion là nhóm người duy nhất dám bỏ lại những bức tường an toàn đó để đi tìm thông tin về Titans. Mỗi khi nhóm họ trở về, rất nhiều người trong số đó đã chết. Tuy nhiên, Eren sẵn sàng gia nhập với họ để đổi lấy sự tự do.

3 Berserk


Được chuyển thế từ bộ Manga nổi tiếng cùng tên dài 25 tập và được phát hành chính thức vào những ngày đầu năm 2012 được đánh giá là một bộ phim hoạt hình đáng xem nhất về thể loại hành động đẫm máu. Nội dung xoay quanh cuộc hành trình trả thù của Gatts với Grifffith. Các đây không lâu, anh đã từng là một thành viên trong tổ chức mang cái tên là Diều Hâu do Griffthe đứng đầu. Tổ chức này thành lập với mục đích giúp đỡ con người khỏi những thế lực độc ác, thế nhưng vì tham vọng quyền lực của mình nên Griffithe đã bán đứng tổ chức cho bọn quỷ dữ trong đó có cả Gatts và người cậu yêu thương nhất là Caska. Cảm thấy thất vọng và đau đớn. Gatts cùng người yêu của mình bắt đầu cuộc hành trình tiêu diệt những tham vọng của Grifffith và bọn ác quỷ độc ác. Suốt chặn đường anh và Caska luôn chịu sự săn lùn ráo riết của vô số lũ các quỷ. Bằng sức mạnh phi thường với thanh kiếm Dragon của minh và những kinh nghiệm từ qua khứ đau thương liệu rằng anh có thể bảo vệ được người mình yêu và bảo vệ chính bản thân mình hay không thì mời các bạn đón xem để hiểu hơn về câu truyện.

4 Ajin


Ajin là câu chuyện về cuộc đời cậu bé Kei Nagai, Kei Nagai là một cậu học sinh cấp ba thông minh và tài năng, trong một lần trên đường đi học về, cậu đã gặp một tai nạn giao thông và điều đó khiến cho cậu miên man không biết gì thêm về mình nữa.
Nhưng cậu ta vẫn sống và dần dần được phục hồi trở lại như lúc trước khi bị tai nạn, cậu ta nhận ra mình chính là Ajin, một trong những kẻ bất tử và là một trong nhữ kẻ không hoàn toàn là con người.Chính những điều khác biệt này và nhận thức được thân phận thực sự của mình, cậu ta bắt đầu phải đối mặt với nhiều việc không mong muốn cũng như một hành trình khó khắn phía trước.

5 Resident Evil


Resident Evil Movie thì chắc ai cũng biết, Resident Evil còn có thể loại hoạt hình 3D cũng rất hay nhưng nội dung thì khác, tuy 3D nhưng độ kinh dị cũng không kém. Các bạn tự khám phá nhé.

6 Koutetsujou no Kabaneri


Trong một thế giới chịu ảnh hưởng của cuộc cách mạng công nghệ, một loài quái vật nguy hiểm đã xuất hiện đe dọa hàng loạt tính mạng của nhân loại. Chúng có vẻ ngoài giống thây ma và gần như bất tử, loài người chỉ giết được chúng khi đâm xuyên thủng quả tim được bao bọc bởi vỏ sắt thép bên ngoài. Hằng ngày, họ phải sống trong nỗi sợ hãi khi sinh vật thây ma gọi là Kanabe kia luôn sẵn sàng lây nhiễm bệnh độc cho họ.

7 Blood Plus


 Câu chuyện kể về Otonashi Saya, một cô gái bị mất đi ký ức được Miyagusuku George nhận nuôi như con gái của mình. Cô đang có một cuộc sống bình thường như bao nữ sinh khác nhưng cuộc sống hạnh phúc ấy đã đổ vỡ khi cô bị Dơi Quỷ tấn công và hiểu ra rằng chỉ có mình cô có thể đánh bại được những con quái vật hút máu ây và bảo vệ mọi người. Thế lực mà Saya phải đối đầu chính là những con quỷ hút máu được tạo ra bởi Diva, em gái sinh đôi của cô.  Cầm trên tay thanh Huyết Kiếm, Saya dấn thân vào một cuộc hành trình nguy hiểm cùng với gia đình và Hiệp Sĩ(Chevalier) của cô - Haji, để giúp thế giới thoát khỏi Dơi Quỷ và khám phá ra ký ức của mình. Cuộc hành trình đã dần hé lộ về lịch sử của Dơi quỷ, quá khứ sâu thẳm của Saya, bắt nguồn từ tận giữa thế kỷ XIX xuyên suốt qua cả hai cuôc Đại chiến và trong cả Chiến tranh Việt Nam

8 Tokyo Ghoul


Tokyo Ghoul là một câu chuyện mang bầu sắc u tối của thành phố Tokyo, nơi xảy ra hàng loạt các vụ án mạng được gây ra bởi các con quỷ đội lốt con người. Main chính nhà ta là sinh viên đại học tên Kaneki gặp gỡ được em Rize, do 2 người có cùng sở thích nên đã phải lòng nhau. Vào buổi tối hôm hẹn hò, em và ảnh cùng nhau đi vào một con phố hẻo rồi cuộc đời anh main thay đổi ngay trong đêm hôm đó.

9 Terra Formars


Câu chuyện xảy ra năm 2577, con tàu có người lái đầu tiên đã đáp xuống Sao Hỏa với 6 phi hành gia được đưa đến để làm nhiệm vụ. Nhưng tất cả những gì họ thấy được là Những con Gián đột biến hình người với sức mạnh kinh hồn. Họ đã bị giết sạch, tuy nhiên, họ đã gửi được tín hiệu về Trái Đất. Giờ đây, con người đã đưa các chiến binh ưu tú nhất để diệt gọn đám bọ đột biến và giành lại Sao Hỏa, nhưng câu chuyện đằng sau đó còn ẩn chứa nhiều khuất tất, các bạn tự bới tìm nhé :D

10 Btooom!


Câu chuyện xoay quanh Ryuta Sakamoto, một chàng trai lười biếng ở ngoài đời nhưng lại là cao thủ số 1 trong game online Btooom. Bỗng 1 hôm Ryuta tỉnh giấc và phát hiện mình đang gặp nguy hiểm, cậu đang ở trong chính trò chơi Btooom với một cuộc chiến sinh tồn, từ đó anh main phải lao vào chơi cuộc chơi chết chóc và bảo vệ người mình yêu quý ( nhân vật trong ảnh - hơi bị hot :D)

Và còn nhiều hơn nữa những bộ anime Viện trưởng + kinh dị siêu hay, mình sẽ còn cập nhật, các bạn theo dõi nhé!

Chúc các bạn có những giây phúc rợn tóc gáy :Đ

Xem thêm:
- Tổng hợp những bộ Anime có main nam bá đạo nhất
- Tổng hợp những bộ anime bẩn bựa, hài hước đáng xem nhất
- 10 Điều bạn nên thực hiện trước khi bước qua tuổi 25
- 36 bí quyết để sống vui, sống khỏe, sống trẻ, sống đẹp mỗi ngày
- 6 động tác đơn giản với 5 phút tập mỗi ngày giúp hình thể săn chắc
- Những mẹo đi du lịch thỏa thích mà vẫn “siêu tiết kiệm”

Hiện nay đã có nhiều công cụ giúp chúng ta dễ dàng chuyển đổi từ một file flash swf sang HTML5 để thực hiện những công việc khác nhau như làm game, banner quảng cáo hay nội dung web... Sau khi convert từ flash sang html5, file chạy nhẹ hơn rất nhiều mà vẫn giữ được chất lượng hình ảnh cũng như hiệu ứng tương đương.

Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC

Sau đây là cách chuyển đổi một file flash swf sang html5 nhanh nhất đó là dùng chính phần mềm Adobe Flash, nếu là bản Adobe flash CS6 thì các bạn cài thêm plugin Toolkit for CreateJS, trên Adobe Flash CC thì đã có sẵn.
Trong bài viết này mình xin hướng dẫn trên Adobe Flash CC:

Mở Adobe Flash Professional CC lên:

Chọn Open để mở file swf của bạn, sau khi mở, bạn chọn Commands -> Convert To Other Document Format như hình bên dưới:


 Cửa sổ popup hiện lên, tại Convert your document to bạn chọn HTML5 Canvas, tại Save As bạn browse tới vị trí lưu file .FLA Flash HTML5 Cavas, bạn có thể giữ nguyên đường dẫn vì phần mềm đã đặt tên khác cho file FLA:


 Sau khi convert từ file FLA Flash sang FLA HTML5 Canvas thì chúng ta sẽ xuất file HTML5:

Tại tab đang mở file FLA HTML5 Canvas bạn chọn: Property -> Publish Setting... như trong hình:


Tại cửa sổ Publish Setting bạn check hoặc không check những option sau:
+ Loop timeline: Check nếu bạn muốn file flash lập lại sau khi kết thúc timeline và ngược lại
+ Overwrite HTML: Check nếu bạn muốn ghi đè lên file html có sẵn và ngược lại (chỉ khi bạn đã từng publish rồi)
+ Export all bitmaps as Spritesheets: Nếu check thì tất cả các hình ảnh bitmap trong flash sẽ xuất ra thành 1 file chung dung lượng khá nặng, bạn nên bỏ check để xuất ra theo từng file riêng.
+ Các option còn lại bạn không cần để ý, sau đó nhấn Publich để xuất file.


 Lưu ý là hành động Ctrl + Enter cũng là Publich nhưng sẽ xuất file theo Setting mặc định.
Vậy là xong, bây giờ bạn ra ngoài folder chứa file html vừa xuất và mở nó lên trên trình duyệt để kiểm tra nhé, bây giờ file swf đã là html5:


Rất dễ dàng phải không các bạn? Chúc các bạn thành công!


Xem thêm:
- Hướng dẫn làm banner quảng cáo HTML5
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro...
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2