这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
非常不错的模仿 word 格式刷实现代码。推荐大家参考下思路。
- <html>
- <head>
- <title>Format Brush</title>
- </head>
- <style>
- table{
- border: solid #ccc 1px;
- }
- td{
- border: solid #ccc 1px;
- width: 140px;
- height: 25px;
- }
- .selected{
- border: solid red 1px;
- }
- a{
- text-decoration: none;
- color: black;
- font-weight: bold;
- }
- .b{
- }
- .i{
- font-style: italic;
- }
- .u{
- text-decoration: underline;
- }
- .s{
- text-decoration: line-through;
- }
- .r{
- color: red;
- }
- </style>
- <body>
- <div>
- <a href="javascript:setBold();">B</a>
- <a href="javascript:setItalic();">I</a>
- <a href="javascript:setUnderline();">U</a>
- <a href="javascript:setLineThrough();">S</a>
- <a href="javascript:setRedColor();">R</a>
- <a href="javascript:doBrush(this);">Brush</a> 再次点击Brush以结束使用格式刷
- </div>
- <table id='t' cellpadding='0' cellspacing='0' border='1'>
- <tr><td class="selected">column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr>
- </table>
- 用法:上下左右键移动单元格, 点格式化按扭格式化当前单元格,
- 点Brush准备使用格式刷,然后点任意单元格就会把当前单元格格式拷贝到被点击的单元格。
- 转载请注明来自:http://blog.csdn.net/sunxing007
- </body>
- <script>
- //辅助函数
- function $(id){return document.getElementById(id);}
- var tb = $('t');
- var selectedCell = tb.rows[0].cells[0];//当前被选择的单元格。
- var brushing = false;//是否正在使用刷子
- function setBold(){
- selectedCell.style.fontWeight = "bold";
- }
- function setItalic(){
- selectedCell.style.fontStyle = "italic";
- }
- function setUnderline(){
- selectedCell.style.textDecoration = "underline";
- }
- function setLineThrough(){
- selectedCell.style.textDecoration = "line-through";
- }
- function setRedColor(){
- selectedCell.style.color = "red";
- }
- //格式拷贝
- function copyFormat(source, dist){
- dist.style.fontWeight = source.style.fontWeight;
- dist.style.fontStyle = source.style.fontStyle;
- dist.style.textDecoration = source.style.textDecoration;
- dist.style.color = source.style.color;
- }
- function doBrush(e){
- if(!brushing){
- $('tip').style.display = '';
- }
- else{
- $('tip').style.display = 'none';
- }
- brushing = !brushing;
- }
- document.onkeydown=function(){
- window.status = event.keyCode;
- switch(event.keyCode){
- case 37: {
- moveLeft();
- break;
- }
- case 38: {
- moveUp();
- break;
- }
- case 39: {
- moveRight();
- break;
- }
- case 40: {
- moveDown();
- break;
- }
- }
- }
- function moveLeft(){
- if(selectedCell&&selectedCell.previousSibling){
- selectedCell.className='';
- selectedCell = selectedCell.previousSibling;
- selectedCell.className = 'selected';
- }
- }
- function moveRight(){
- if(selectedCell&&selectedCell.nextSibling){
- selectedCell.className='';
- selectedCell = selectedCell.nextSibling;
- selectedCell.className = 'selected';
- }
- }
- function moveUp(){
- if(selectedCell&&selectedCell.parentNode&&selectedCell.parentNode.previousSibling){
- selectedCell.className='';
- var _index = selectedCell.cellIndex;
- selectedCell = selectedCell.parentNode.previousSibling.cells[_index];
- selectedCell.className = 'selected';
- }
- }
- function moveDown(){
- if(selectedCell&&selectedCell.parentNode&&selectedCell.parentNode.nextSibling){
- selectedCell.className='';
- var _index = selectedCell.cellIndex;
- selectedCell = selectedCell.parentNode.nextSibling.cells[_index];
- selectedCell.className = 'selected';
- }
- }
- document.body.onload = function(){
- for(var i=0; i<tb.rows.length; i++){
- for(var j=0; j<tb.rows[i].cells.length; j++){
- tb.rows[i].cells[j].onclick = function(){
- if(brushing){
- copyFormat(selectedCell, this);
- }
- };
- }
- }
- }
- </script>
- </html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/286916.html