结构图如下：

html如下：

<!DOCTYPE html>

<html>

<head>

    <title>button test</title>

  <link rel="stylesheet" type="text/css" href="css/1.css">

</head>

<body>

<script src="js/udf.js"></script>

<input class="btn1" type="button" value="click" onclick="func1()">

<input id="txt1" class="txt1" type="text" value="">

</body>

</html>

css如下：

.btn1{

  font-size: 24px;

  width: 100px;

  height: 60px;

}

.txt1{

  font-size: 48px;

  width: 100px;

}

js如下：

function func1()

{

  var sum=0;

  var string1 = document.getElementById("txt1");

    for(var i =1;i<=10;i++)

    {

    sum += i;

        //document.write(sum+"<br\>") ;

    }

  string1.value = sum;

}

外联css及js的使用的更多相关文章

  1. 内联外联CSS和JS

    内联CSS 代码示例: <p style="color:red;font-size:18px">这里文字是红色.</p> 内联CSS也可称为行内CSS或者行 ...

  2. 在VIEW引入CSS、JS文件

    外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...

  3. background属性总结，background-image路径问题相对于css和js

    (1)background属性总结 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color规定要使用的背景颜色.background-pos ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  6. 来，一起让我们越来越懒，面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

  7. 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  8. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  9. django 关于html、css、js 目录位置

    项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...

随机推荐

  1. nginx root&alias文件路径配置

    转:https://www.ttlsa.com/nginx/nginx-root_alias-file-path-configuration/ 总结: alias 改变了访问路径.root对应loca ...

  2. guacamole 0.8.3 项目部署 桌面虚拟化

    Guacamole是一个基于HTML5的虚拟桌面应用程序,其中包含多个组件,由各组件共同构成Guacamole---一个完整的虚拟桌面解决方案,不需要任何插件,只要浏览器支持HTML5就可以实现,而且 ...

  3. OC语言前期准备

    OC语言前期准备 一.OC简介 Oc语言在c语言的基础上,增加了一层最小的面向对象语法,完全兼容C语言,在OC代码中,可以混用c,甚至是c++代码. 可以使用OC开发mac osx平台和ios平台的应 ...

  4. Maven+SSM搭建总结（非教程）

    记录我用Maven搭建Spring+SpringMVC+Mybatis项目的过程. 网上关于这个的详细教程有很多,但是优质而适合自己看的需要自己筛选以下我看过的几篇认为讲的比较详细的资源(照着做吧,做 ...

  5. IEEE参考文献格式

    IEEE参考文献格式 由于国外期刊参考文献与国内参考文献的格式有很大区别,其中最常用的参考文献为会议论文.书籍.期刊文献,所以特别在此记录说明,方便以后使用. 会议论文(Published Confe ...

  6. Visual Studio 2015 社区版.专业版.企业版[含安装密钥Pro&Ent]

    社区版(Visual Studio Community 2015)可供非企业或开源开发者们免费访问: 在线安装exe:http://download.microsoft.com/download/B/ ...

  7. 3、android notification 详细用法

    在 android 系统中,在应用程序可能会遇到几种情况需要通知用户,有的需要用户回应,有的则不需要,例如: * 当保存文件等事件完成,应该会出现一个小的消息,以确认保存成功. * 如果应用程序在后台 ...

  8. SharePoint 2016 Beta 2 安装体验

    博客地址:http://blog.csdn.net/FoxDave 最近忙碌了一段时间,2016正式版快要发布了,想尽快熟悉熟悉.2016不再提供免费版Foundation的支持,只有Server版本 ...

  9. 理解OAuth 2.0(转载)

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标 ...

  10. cocos2d/x 自带字体（label）

    CCLabelTTF* label1 = CCLabelTTF::labelWithString("1掼蛋as", "AppleGothic", 15); la ...