Created
February 27, 2017 10:23
-
-
Save cuduy197/acf1e7636d74df85608c13e64303edb9 to your computer and use it in GitHub Desktop.
Bảng mã unicode! // source https://jsbin.com/sarelal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en-us" > | |
<meta charset="UTF-8"> | |
<head> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
<meta charset="UTF-8"> | |
<title>Bảng mã unicode!</title> | |
<script src="https://fb.me/react-15.1.0.js"></script> | |
<script src="https://fb.me/react-dom-15.1.0.js"></script> | |
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> | |
<style id="jsbin-css"> | |
body { | |
text-align: center; | |
margin : 20px; | |
border-radius : 15px; | |
background-color: #fff; | |
background-image: | |
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), | |
linear-gradient(#eee .1em, transparent .1em); | |
background-size: 100% 1.2em; | |
} | |
button { | |
border-radius : 10px; | |
text-align: center; | |
margin: 20px; | |
width: 80px; | |
height: 80px; | |
color: white; | |
background-color: indigo; | |
-webkit-transition: width 0.25s, height 0.25s, -webkit-transform 0.25s ease-out; /* Safari */ | |
transition: width 0.25s, height 0.25s, transform 0.25s ease-out; | |
} | |
button:hover { | |
border-radius : 15px; | |
color: black; | |
background-color: pink; | |
box-shadow : 0 0 10px 0px blue; | |
font-size : 3em; | |
-webkit-transform: scale(1.55,1.55); /* Safari */ | |
transform: scale(1.55,1.55); | |
} | |
</style> | |
</head> | |
<body > | |
<div id="root"> | |
</div> | |
<script id="jsbin-javascript"> | |
"use strict"; | |
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var ShowChart = (function (_React$Component) { | |
_inherits(ShowChart, _React$Component); | |
function ShowChart() { | |
_classCallCheck(this, ShowChart); | |
_get(Object.getPrototypeOf(ShowChart.prototype), "constructor", this).apply(this, arguments); | |
} | |
_createClass(ShowChart, [{ | |
key: "showInfo", | |
value: function showInfo(e) { | |
console.log('ID: ' + e.target.id); | |
} | |
}, { | |
key: "render", | |
value: function render() { | |
var numberChar = 10176; | |
var startChar = 10000; | |
var list = []; | |
for (var i = startChar; i < numberChar; i++) { | |
list.push(React.createElement( | |
"button", | |
{ className: "", id: i, key: i, onMouseOver: this.showInfo.bind(this) }, | |
String.fromCharCode(0 + i) + "", | |
" ", | |
React.createElement( | |
"span", | |
{ className: "badge" }, | |
"&#", | |
i, | |
";" | |
), | |
" " | |
)); | |
} | |
return React.createElement( | |
"div", | |
null, | |
React.createElement( | |
"h1", | |
{ className: "alert alert-info" }, | |
"Bảng mã Unicode từ 10000 - 100175" | |
), | |
list, | |
React.createElement("hr", null), | |
React.createElement( | |
"span", | |
null, | |
"Bùi Khương Duy ❤ ReactJS" | |
) | |
); | |
} | |
}]); | |
return ShowChart; | |
})(React.Component); | |
ReactDOM.render(React.createElement(ShowChart, null), document.getElementById('root')); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html lang="en-us" > | |
<meta charset="UTF-8"> | |
<head> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
<meta charset="UTF-8"> | |
<title>Bảng mã unicode!</title> | |
<script src="https://fb.me/react-15.1.0.js"><\/script> | |
<script src="https://fb.me/react-dom-15.1.0.js"><\/script> | |
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> | |
</head> | |
<body > | |
<div id="root"> | |
</div> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">body { | |
text-align: center; | |
margin : 20px; | |
border-radius : 15px; | |
background-color: #fff; | |
background-image: | |
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), | |
linear-gradient(#eee .1em, transparent .1em); | |
background-size: 100% 1.2em; | |
} | |
button { | |
border-radius : 10px; | |
text-align: center; | |
margin: 20px; | |
width: 80px; | |
height: 80px; | |
color: white; | |
background-color: indigo; | |
-webkit-transition: width 0.25s, height 0.25s, -webkit-transform 0.25s ease-out; /* Safari */ | |
transition: width 0.25s, height 0.25s, transform 0.25s ease-out; | |
} | |
button:hover { | |
border-radius : 15px; | |
color: black; | |
background-color: pink; | |
box-shadow : 0 0 10px 0px blue; | |
font-size : 3em; | |
-webkit-transform: scale(1.55,1.55); /* Safari */ | |
transform: scale(1.55,1.55); | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
class ShowChart extends React.Component { | |
showInfo(e) { | |
console.log('ID: ' + e.target.id); | |
} | |
render() { | |
let numberChar = 10176; | |
let startChar = 10000; | |
var list = []; | |
for (var i = startChar; i < numberChar; i++) { | |
list.push(<button className="" id={i} key={i} onMouseOver={this.showInfo.bind(this)}>{String.fromCharCode(0 + i) + ""} <span className="badge">&#{i};</span> </button>) | |
} | |
return ( | |
<div> | |
<h1 className="alert alert-info" >Bảng mã Unicode từ 10000 - 100175</h1> | |
{list} | |
<hr /> | |
<span>Bùi Khương Duy ❤ ReactJS</span> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render( | |
<ShowChart />, | |
document.getElementById('root') | |
); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
text-align: center; | |
margin : 20px; | |
border-radius : 15px; | |
background-color: #fff; | |
background-image: | |
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), | |
linear-gradient(#eee .1em, transparent .1em); | |
background-size: 100% 1.2em; | |
} | |
button { | |
border-radius : 10px; | |
text-align: center; | |
margin: 20px; | |
width: 80px; | |
height: 80px; | |
color: white; | |
background-color: indigo; | |
-webkit-transition: width 0.25s, height 0.25s, -webkit-transform 0.25s ease-out; /* Safari */ | |
transition: width 0.25s, height 0.25s, transform 0.25s ease-out; | |
} | |
button:hover { | |
border-radius : 15px; | |
color: black; | |
background-color: pink; | |
box-shadow : 0 0 10px 0px blue; | |
font-size : 3em; | |
-webkit-transform: scale(1.55,1.55); /* Safari */ | |
transform: scale(1.55,1.55); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var ShowChart = (function (_React$Component) { | |
_inherits(ShowChart, _React$Component); | |
function ShowChart() { | |
_classCallCheck(this, ShowChart); | |
_get(Object.getPrototypeOf(ShowChart.prototype), "constructor", this).apply(this, arguments); | |
} | |
_createClass(ShowChart, [{ | |
key: "showInfo", | |
value: function showInfo(e) { | |
console.log('ID: ' + e.target.id); | |
} | |
}, { | |
key: "render", | |
value: function render() { | |
var numberChar = 10176; | |
var startChar = 10000; | |
var list = []; | |
for (var i = startChar; i < numberChar; i++) { | |
list.push(React.createElement( | |
"button", | |
{ className: "", id: i, key: i, onMouseOver: this.showInfo.bind(this) }, | |
String.fromCharCode(0 + i) + "", | |
" ", | |
React.createElement( | |
"span", | |
{ className: "badge" }, | |
"&#", | |
i, | |
";" | |
), | |
" " | |
)); | |
} | |
return React.createElement( | |
"div", | |
null, | |
React.createElement( | |
"h1", | |
{ className: "alert alert-info" }, | |
"Bảng mã Unicode từ 10000 - 100175" | |
), | |
list, | |
React.createElement("hr", null), | |
React.createElement( | |
"span", | |
null, | |
"Bùi Khương Duy ❤ ReactJS" | |
) | |
); | |
} | |
}]); | |
return ShowChart; | |
})(React.Component); | |
ReactDOM.render(React.createElement(ShowChart, null), document.getElementById('root')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment